@gravity-ui/navigation 6.5.1 → 7.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/components/AsideHeader/AsideHeader.css +9 -1
- package/build/cjs/components/AsideHeader/AsideHeader.js +2 -2
- package/build/cjs/components/AsideHeader/AsideHeader.js.map +1 -1
- package/build/cjs/components/AsideHeader/AsideHeader.module.scss.js +1 -1
- package/build/cjs/components/AsideHeader/AsideHeaderContext.d.ts +5 -0
- package/build/cjs/components/AsideHeader/AsideHeaderContext.js +2 -0
- package/build/cjs/components/AsideHeader/AsideHeaderContext.js.map +1 -1
- package/build/cjs/components/AsideHeader/__playwright__/AsideTransitionExample.d.ts +8 -0
- package/build/cjs/components/AsideHeader/__playwright__/CollapseButtonExample.d.ts +14 -0
- package/build/cjs/components/AsideHeader/__playwright__/CompactTransitionExample.d.ts +12 -0
- package/build/cjs/components/AsideHeader/__playwright__/CurrentIndicatorExample.d.ts +20 -0
- package/build/cjs/components/AsideHeader/__playwright__/QuickAccessOverflowExample.d.ts +8 -0
- package/build/cjs/components/AsideHeader/__playwright__/currentIndicatorPaint.d.ts +21 -0
- package/build/cjs/components/AsideHeader/__playwright__/transitionTestUtils.d.ts +4 -0
- package/build/cjs/components/AsideHeader/__stories__/fullNavigationMoc.d.ts +6 -0
- package/build/cjs/components/AsideHeader/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.js +2 -4
- package/build/cjs/components/AsideHeader/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.d.ts +2 -1
- package/build/cjs/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.js +5 -1
- package/build/cjs/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/AllPagesPanel/i18n/en.json.js +1 -3
- package/build/cjs/components/AsideHeader/components/AllPagesPanel/i18n/en.json.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/AllPagesPanel/i18n/index.d.ts +4 -4
- package/build/cjs/components/AsideHeader/components/AllPagesPanel/i18n/ru.json.js +2 -4
- package/build/cjs/components/AsideHeader/components/AllPagesPanel/i18n/ru.json.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/AsideDivider.d.ts +7 -0
- package/build/cjs/components/AsideHeader/components/AsideDivider.js +13 -0
- package/build/cjs/components/AsideHeader/components/AsideDivider.js.map +1 -0
- package/build/cjs/components/AsideHeader/components/CollapseButton/CollapseButton.css +1 -1
- package/build/cjs/components/AsideHeader/components/CollapseButton/CollapseButton.d.ts +3 -1
- package/build/cjs/components/AsideHeader/components/CollapseButton/CollapseButton.js +12 -8
- package/build/cjs/components/AsideHeader/components/CollapseButton/CollapseButton.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/CollapseButton/CollapseButton.module.scss.js +1 -1
- package/build/cjs/components/AsideHeader/components/CollapseButton/useCollapseAnchor.d.ts +20 -0
- package/build/cjs/components/AsideHeader/components/CollapseButton/useCollapseAnchor.js +170 -0
- package/build/cjs/components/AsideHeader/components/CollapseButton/useCollapseAnchor.js.map +1 -0
- package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.css +3 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.d.ts +13 -2
- package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.js +53 -39
- package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.module.scss.js +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.css +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.js +4 -2
- package/build/cjs/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.css +33 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.js +158 -43
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.module.scss.js +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.types.d.ts +22 -4
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopup.d.ts +19 -0
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopup.js +137 -20
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopup.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemQuickAccessPin.d.ts +7 -0
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemQuickAccessPin.js +25 -0
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemQuickAccessPin.js.map +1 -0
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/renderItemTitle.d.ts +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/renderItemTitle.js +5 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/renderItemTitle.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.css +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.d.ts +4 -6
- package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.js +14 -5
- package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.module.scss.js +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.d.ts +8 -8
- package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.js +68 -33
- package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/constants.d.ts +1 -0
- package/build/cjs/components/AsideHeader/components/CompositeBar/constants.js +2 -0
- package/build/cjs/components/AsideHeader/components/CompositeBar/constants.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/presentationCurrent.d.ts +24 -0
- package/build/cjs/components/AsideHeader/components/CompositeBar/presentationCurrent.js +39 -0
- package/build/cjs/components/AsideHeader/components/CompositeBar/presentationCurrent.js.map +1 -0
- package/build/cjs/components/AsideHeader/components/CompositeBar/utils.d.ts +12 -7
- package/build/cjs/components/AsideHeader/components/CompositeBar/utils.js +42 -35
- package/build/cjs/components/AsideHeader/components/CompositeBar/utils.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/FirstPanel.js +129 -10
- package/build/cjs/components/AsideHeader/components/FirstPanel.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/FooterItem/FooterItem.css +1 -1
- package/build/cjs/components/AsideHeader/components/FooterItem/FooterItem.js +18 -2
- package/build/cjs/components/AsideHeader/components/FooterItem/FooterItem.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/FooterItem/FooterItem.module.scss.js +1 -1
- package/build/cjs/components/AsideHeader/components/Header.js +7 -3
- package/build/cjs/components/AsideHeader/components/Header.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/PageLayout/AsideFallback.css +9 -1
- package/build/cjs/components/AsideHeader/components/PageLayout/AsideFallback.d.ts +1 -0
- package/build/cjs/components/AsideHeader/components/PageLayout/AsideFallback.js +13 -6
- package/build/cjs/components/AsideHeader/components/PageLayout/AsideFallback.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/PageLayout/AsideLayoutTransition.d.ts +80 -0
- package/build/cjs/components/AsideHeader/components/PageLayout/AsideLayoutTransition.js +600 -0
- package/build/cjs/components/AsideHeader/components/PageLayout/AsideLayoutTransition.js.map +1 -0
- package/build/cjs/components/AsideHeader/components/PageLayout/CurrentIndicatorTransition.d.ts +14 -0
- package/build/cjs/components/AsideHeader/components/PageLayout/CurrentIndicatorTransition.js +164 -0
- package/build/cjs/components/AsideHeader/components/PageLayout/CurrentIndicatorTransition.js.map +1 -0
- package/build/cjs/components/AsideHeader/components/PageLayout/CurrentPresentationObserver.d.ts +14 -0
- package/build/cjs/components/AsideHeader/components/PageLayout/CurrentPresentationObserver.js +94 -0
- package/build/cjs/components/AsideHeader/components/PageLayout/CurrentPresentationObserver.js.map +1 -0
- package/build/cjs/components/AsideHeader/components/PageLayout/PageLayout.css +9 -1
- package/build/cjs/components/AsideHeader/components/PageLayout/PageLayout.d.ts +1 -1
- package/build/cjs/components/AsideHeader/components/PageLayout/PageLayout.js +14 -5
- package/build/cjs/components/AsideHeader/components/PageLayout/PageLayout.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/PageLayout/PageLayoutAside.css +9 -1
- package/build/cjs/components/AsideHeader/components/PageLayout/PageLayoutAside.d.ts +1 -1
- package/build/cjs/components/AsideHeader/components/PageLayout/PageLayoutAside.js +5 -2
- package/build/cjs/components/AsideHeader/components/PageLayout/PageLayoutAside.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/PageLayout/currentIndicatorDom.d.ts +7 -0
- package/build/cjs/components/AsideHeader/components/PageLayout/currentIndicatorDom.js +25 -0
- package/build/cjs/components/AsideHeader/components/PageLayout/currentIndicatorDom.js.map +1 -0
- package/build/cjs/components/AsideHeader/components/PageLayout/currentIndicatorModel.d.ts +25 -0
- package/build/cjs/components/AsideHeader/components/PageLayout/currentIndicatorModel.js +89 -0
- package/build/cjs/components/AsideHeader/components/PageLayout/currentIndicatorModel.js.map +1 -0
- package/build/cjs/components/AsideHeader/components/Panels.js +2 -2
- package/build/cjs/components/AsideHeader/components/Panels.js.map +1 -1
- package/build/cjs/components/AsideHeader/density.d.ts +21 -0
- package/build/cjs/components/AsideHeader/density.js +61 -0
- package/build/cjs/components/AsideHeader/density.js.map +1 -0
- package/build/cjs/components/AsideHeader/i18n/__mocks__/index.d.ts +1 -0
- package/build/cjs/components/AsideHeader/i18n/en.json.js +10 -1
- package/build/cjs/components/AsideHeader/i18n/en.json.js.map +1 -1
- package/build/cjs/components/AsideHeader/i18n/index.d.ts +4 -4
- package/build/cjs/components/AsideHeader/i18n/ru.json.js +10 -1
- package/build/cjs/components/AsideHeader/i18n/ru.json.js.map +1 -1
- package/build/cjs/components/AsideHeader/index.d.ts +1 -0
- package/build/cjs/components/AsideHeader/quickAccess.d.ts +9 -0
- package/build/cjs/components/AsideHeader/quickAccess.js +31 -0
- package/build/cjs/components/AsideHeader/quickAccess.js.map +1 -0
- package/build/cjs/components/AsideHeader/types.d.ts +50 -5
- package/build/cjs/components/AsideHeader/types.js.map +1 -1
- package/build/cjs/components/AsideHeader/useAsideHeaderInnerContextValue.js +18 -3
- package/build/cjs/components/AsideHeader/useAsideHeaderInnerContextValue.js.map +1 -1
- package/build/cjs/components/AsideHeader/utils.d.ts +1 -0
- package/build/cjs/components/AsideHeader/utils.js +2 -0
- package/build/cjs/components/AsideHeader/utils.js.map +1 -1
- package/build/cjs/components/Footer/desktop/Footer.css +1 -1
- package/build/cjs/components/Footer/mobile/Footer.css +1 -1
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.css +1 -1
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.js +1 -1
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.js.map +1 -1
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.module.scss.js +1 -1
- package/build/cjs/components/Logo/Logo.css +1 -1
- package/build/cjs/components/Logo/Logo.d.ts +1 -0
- package/build/cjs/components/Logo/Logo.js +4 -4
- package/build/cjs/components/Logo/Logo.js.map +1 -1
- package/build/cjs/components/constants.d.ts +5 -0
- package/build/cjs/components/constants.js +6 -0
- package/build/cjs/components/constants.js.map +1 -1
- package/build/cjs/components/types.d.ts +11 -4
- package/build/docs/components/AsideHeader.md +244 -51
- package/build/esm/components/AsideHeader/AsideHeader.css +9 -1
- package/build/esm/components/AsideHeader/AsideHeader.js +2 -2
- package/build/esm/components/AsideHeader/AsideHeader.js.map +1 -1
- package/build/esm/components/AsideHeader/AsideHeader.module.scss.js +1 -1
- package/build/esm/components/AsideHeader/AsideHeaderContext.d.ts +5 -0
- package/build/esm/components/AsideHeader/AsideHeaderContext.js +2 -0
- package/build/esm/components/AsideHeader/AsideHeaderContext.js.map +1 -1
- package/build/esm/components/AsideHeader/__playwright__/AsideTransitionExample.d.ts +8 -0
- package/build/esm/components/AsideHeader/__playwright__/CollapseButtonExample.d.ts +14 -0
- package/build/esm/components/AsideHeader/__playwright__/CompactTransitionExample.d.ts +12 -0
- package/build/esm/components/AsideHeader/__playwright__/CurrentIndicatorExample.d.ts +20 -0
- package/build/esm/components/AsideHeader/__playwright__/QuickAccessOverflowExample.d.ts +8 -0
- package/build/esm/components/AsideHeader/__playwright__/currentIndicatorPaint.d.ts +21 -0
- package/build/esm/components/AsideHeader/__playwright__/transitionTestUtils.d.ts +4 -0
- package/build/esm/components/AsideHeader/__stories__/fullNavigationMoc.d.ts +6 -0
- package/build/esm/components/AsideHeader/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.js +3 -5
- package/build/esm/components/AsideHeader/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.js.map +1 -1
- package/build/esm/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.d.ts +2 -1
- package/build/esm/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.js +5 -1
- package/build/esm/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.js.map +1 -1
- package/build/esm/components/AsideHeader/components/AllPagesPanel/i18n/en.json.js +1 -3
- package/build/esm/components/AsideHeader/components/AllPagesPanel/i18n/en.json.js.map +1 -1
- package/build/esm/components/AsideHeader/components/AllPagesPanel/i18n/index.d.ts +4 -4
- package/build/esm/components/AsideHeader/components/AllPagesPanel/i18n/ru.json.js +2 -4
- package/build/esm/components/AsideHeader/components/AllPagesPanel/i18n/ru.json.js.map +1 -1
- package/build/esm/components/AsideHeader/components/AsideDivider.d.ts +7 -0
- package/build/esm/components/AsideHeader/components/AsideDivider.js +11 -0
- package/build/esm/components/AsideHeader/components/AsideDivider.js.map +1 -0
- package/build/esm/components/AsideHeader/components/CollapseButton/CollapseButton.css +1 -1
- package/build/esm/components/AsideHeader/components/CollapseButton/CollapseButton.d.ts +3 -1
- package/build/esm/components/AsideHeader/components/CollapseButton/CollapseButton.js +12 -8
- package/build/esm/components/AsideHeader/components/CollapseButton/CollapseButton.js.map +1 -1
- package/build/esm/components/AsideHeader/components/CollapseButton/CollapseButton.module.scss.js +1 -1
- package/build/esm/components/AsideHeader/components/CollapseButton/useCollapseAnchor.d.ts +20 -0
- package/build/esm/components/AsideHeader/components/CollapseButton/useCollapseAnchor.js +167 -0
- package/build/esm/components/AsideHeader/components/CollapseButton/useCollapseAnchor.js.map +1 -0
- package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.css +3 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.d.ts +13 -2
- package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.js +54 -40
- package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.js.map +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.module.scss.js +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.css +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.js +4 -2
- package/build/esm/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.js.map +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.css +33 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.js +161 -46
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.js.map +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.module.scss.js +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.types.d.ts +22 -4
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemPopup.d.ts +19 -0
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemPopup.js +139 -23
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemPopup.js.map +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemQuickAccessPin.d.ts +7 -0
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemQuickAccessPin.js +23 -0
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemQuickAccessPin.js.map +1 -0
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/renderItemTitle.d.ts +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/renderItemTitle.js +5 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/renderItemTitle.js.map +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.css +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.d.ts +4 -6
- package/build/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.js +15 -6
- package/build/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.js.map +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.module.scss.js +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.d.ts +8 -8
- package/build/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.js +68 -33
- package/build/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.js.map +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/constants.d.ts +1 -0
- package/build/esm/components/AsideHeader/components/CompositeBar/constants.js +2 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/constants.js.map +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/presentationCurrent.d.ts +24 -0
- package/build/esm/components/AsideHeader/components/CompositeBar/presentationCurrent.js +36 -0
- package/build/esm/components/AsideHeader/components/CompositeBar/presentationCurrent.js.map +1 -0
- package/build/esm/components/AsideHeader/components/CompositeBar/utils.d.ts +12 -7
- package/build/esm/components/AsideHeader/components/CompositeBar/utils.js +44 -35
- package/build/esm/components/AsideHeader/components/CompositeBar/utils.js.map +1 -1
- package/build/esm/components/AsideHeader/components/FirstPanel.js +131 -12
- package/build/esm/components/AsideHeader/components/FirstPanel.js.map +1 -1
- package/build/esm/components/AsideHeader/components/FooterItem/FooterItem.css +1 -1
- package/build/esm/components/AsideHeader/components/FooterItem/FooterItem.js +18 -2
- package/build/esm/components/AsideHeader/components/FooterItem/FooterItem.js.map +1 -1
- package/build/esm/components/AsideHeader/components/FooterItem/FooterItem.module.scss.js +1 -1
- package/build/esm/components/AsideHeader/components/Header.js +8 -4
- package/build/esm/components/AsideHeader/components/Header.js.map +1 -1
- package/build/esm/components/AsideHeader/components/PageLayout/AsideFallback.css +9 -1
- package/build/esm/components/AsideHeader/components/PageLayout/AsideFallback.d.ts +1 -0
- package/build/esm/components/AsideHeader/components/PageLayout/AsideFallback.js +14 -7
- package/build/esm/components/AsideHeader/components/PageLayout/AsideFallback.js.map +1 -1
- package/build/esm/components/AsideHeader/components/PageLayout/AsideLayoutTransition.d.ts +80 -0
- package/build/esm/components/AsideHeader/components/PageLayout/AsideLayoutTransition.js +598 -0
- package/build/esm/components/AsideHeader/components/PageLayout/AsideLayoutTransition.js.map +1 -0
- package/build/esm/components/AsideHeader/components/PageLayout/CurrentIndicatorTransition.d.ts +14 -0
- package/build/esm/components/AsideHeader/components/PageLayout/CurrentIndicatorTransition.js +162 -0
- package/build/esm/components/AsideHeader/components/PageLayout/CurrentIndicatorTransition.js.map +1 -0
- package/build/esm/components/AsideHeader/components/PageLayout/CurrentPresentationObserver.d.ts +14 -0
- package/build/esm/components/AsideHeader/components/PageLayout/CurrentPresentationObserver.js +92 -0
- package/build/esm/components/AsideHeader/components/PageLayout/CurrentPresentationObserver.js.map +1 -0
- package/build/esm/components/AsideHeader/components/PageLayout/PageLayout.css +9 -1
- package/build/esm/components/AsideHeader/components/PageLayout/PageLayout.d.ts +1 -1
- package/build/esm/components/AsideHeader/components/PageLayout/PageLayout.js +15 -6
- package/build/esm/components/AsideHeader/components/PageLayout/PageLayout.js.map +1 -1
- package/build/esm/components/AsideHeader/components/PageLayout/PageLayoutAside.css +9 -1
- package/build/esm/components/AsideHeader/components/PageLayout/PageLayoutAside.d.ts +1 -1
- package/build/esm/components/AsideHeader/components/PageLayout/PageLayoutAside.js +5 -2
- package/build/esm/components/AsideHeader/components/PageLayout/PageLayoutAside.js.map +1 -1
- package/build/esm/components/AsideHeader/components/PageLayout/currentIndicatorDom.d.ts +7 -0
- package/build/esm/components/AsideHeader/components/PageLayout/currentIndicatorDom.js +17 -0
- package/build/esm/components/AsideHeader/components/PageLayout/currentIndicatorDom.js.map +1 -0
- package/build/esm/components/AsideHeader/components/PageLayout/currentIndicatorModel.d.ts +25 -0
- package/build/esm/components/AsideHeader/components/PageLayout/currentIndicatorModel.js +84 -0
- package/build/esm/components/AsideHeader/components/PageLayout/currentIndicatorModel.js.map +1 -0
- package/build/esm/components/AsideHeader/components/Panels.js +3 -3
- package/build/esm/components/AsideHeader/components/Panels.js.map +1 -1
- package/build/esm/components/AsideHeader/density.d.ts +21 -0
- package/build/esm/components/AsideHeader/density.js +58 -0
- package/build/esm/components/AsideHeader/density.js.map +1 -0
- package/build/esm/components/AsideHeader/i18n/__mocks__/index.d.ts +1 -0
- package/build/esm/components/AsideHeader/i18n/en.json.js +8 -2
- package/build/esm/components/AsideHeader/i18n/en.json.js.map +1 -1
- package/build/esm/components/AsideHeader/i18n/index.d.ts +4 -4
- package/build/esm/components/AsideHeader/i18n/ru.json.js +8 -2
- package/build/esm/components/AsideHeader/i18n/ru.json.js.map +1 -1
- package/build/esm/components/AsideHeader/index.d.ts +1 -0
- package/build/esm/components/AsideHeader/quickAccess.d.ts +9 -0
- package/build/esm/components/AsideHeader/quickAccess.js +27 -0
- package/build/esm/components/AsideHeader/quickAccess.js.map +1 -0
- package/build/esm/components/AsideHeader/types.d.ts +50 -5
- package/build/esm/components/AsideHeader/types.js.map +1 -1
- package/build/esm/components/AsideHeader/useAsideHeaderInnerContextValue.js +18 -3
- package/build/esm/components/AsideHeader/useAsideHeaderInnerContextValue.js.map +1 -1
- package/build/esm/components/AsideHeader/utils.d.ts +1 -0
- package/build/esm/components/AsideHeader/utils.js +2 -1
- package/build/esm/components/AsideHeader/utils.js.map +1 -1
- package/build/esm/components/Footer/desktop/Footer.css +1 -1
- package/build/esm/components/Footer/mobile/Footer.css +1 -1
- package/build/esm/components/HotkeysPanel/HotkeysPanel.css +1 -1
- package/build/esm/components/HotkeysPanel/HotkeysPanel.js +1 -1
- package/build/esm/components/HotkeysPanel/HotkeysPanel.js.map +1 -1
- package/build/esm/components/HotkeysPanel/HotkeysPanel.module.scss.js +1 -1
- package/build/esm/components/Logo/Logo.css +1 -1
- package/build/esm/components/Logo/Logo.d.ts +1 -0
- package/build/esm/components/Logo/Logo.js +4 -4
- package/build/esm/components/Logo/Logo.js.map +1 -1
- package/build/esm/components/constants.d.ts +5 -0
- package/build/esm/components/constants.js +6 -1
- package/build/esm/components/constants.js.map +1 -1
- package/build/esm/components/types.d.ts +11 -4
- package/package.json +1 -1
- package/build/cjs/assets/icons/control-menu-button.svg.js +0 -41
- package/build/cjs/assets/icons/control-menu-button.svg.js.map +0 -1
- package/build/esm/assets/icons/control-menu-button.svg.js +0 -18
- package/build/esm/assets/icons/control-menu-button.svg.js.map +0 -1
|
@@ -16,10 +16,126 @@ import {AsideHeader} from '@gravity-ui/navigation';
|
|
|
16
16
|
The component has two possible states: collapsed, expanded.
|
|
17
17
|
Уou can manage between states using `compact`, `onChangeCompact` props and also hide button with `hideCollapseButton`.
|
|
18
18
|
|
|
19
|
+
Collapse and expansion animate the sidebar width, item positions, and selection surfaces together.
|
|
20
|
+
Titles are laid out at the target width and revealed during expansion, without rewrapping on each
|
|
21
|
+
frame or a second layout change at the end. Clicking the control again reverses from the currently
|
|
22
|
+
displayed positions. The `compact` state and callbacks always describe the requested target state.
|
|
23
|
+
Users who prefer reduced motion receive an immediate layout change.
|
|
24
|
+
|
|
25
|
+
All built-in horizontal separators, including `type: 'divider'` items in header, menu, footer,
|
|
26
|
+
and nested groups, resize with the sidebar while preserving their local spacing.
|
|
27
|
+
|
|
28
|
+
The current-item transition follows changes to `compact`: when a selected child
|
|
29
|
+
becomes represented by its group or **More**, one background moves between those rows. It also
|
|
30
|
+
supports reversing an unfinished transition. Ordinary page selection remains immediate, and
|
|
31
|
+
quick-access highlight settings and the theme's selection transparency are preserved. A current
|
|
32
|
+
change during this movement restores native highlighting while the layout continues animating.
|
|
33
|
+
Ambiguous selections retain existing native highlighting; reduced motion switches immediately.
|
|
34
|
+
|
|
35
|
+
### Disabling compact transitions
|
|
36
|
+
|
|
37
|
+
Set `compactTransition={false}` on `AsideHeader` or `PageLayout` (default: `true`).
|
|
38
|
+
Aside and content widths, custom background width, row and divider geometry, current-item
|
|
39
|
+
highlighting, and the offset of an open Drawer immediately follow the target `compact` state.
|
|
40
|
+
Disabling the flag during a transition finishes it immediately and releases transition resources.
|
|
41
|
+
Re-enabling it without changing `compact` does not animate; simultaneous updates use the new flag.
|
|
42
|
+
Children stay mounted. `PageLayoutAside` and `AsideFallback` inherit the layout setting.
|
|
43
|
+
|
|
44
|
+
Hover effects, independent Drawer opening/closing, and the opacity effects of the footer divider
|
|
45
|
+
and custom scrollbar are preserved. The existing `prefers-reduced-motion` behavior is unchanged.
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
<AsideHeader compact={compact} compactTransition={false} onChangeCompact={setCompact} />
|
|
49
|
+
|
|
50
|
+
<PageLayout compact={compact} compactTransition={false}>
|
|
51
|
+
<PageLayoutAside menuItems={menuItems} onChangeCompact={setCompact} />
|
|
52
|
+
<PageLayout.Content>{children}</PageLayout.Content>
|
|
53
|
+
</PageLayout>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### Collapse button (v7)
|
|
57
|
+
|
|
58
|
+
The collapse button sits at the aside edge beside the last visible `FooterItem`. The row keeps its
|
|
59
|
+
own action and menu; in expanded mode it reserves 24 px for the button. In compact mode, hovering
|
|
60
|
+
anywhere in the aside or over the button, or focusing the button from the keyboard, reveals the
|
|
61
|
+
control. The selected row's built-in tooltip is suppressed in compact mode even when `enableTooltip={true}`. With no
|
|
62
|
+
visible `FooterItem`, a blank bottom row provides the same control. `hideCollapseButton` removes
|
|
63
|
+
the control, reserved space, and blank row.
|
|
64
|
+
|
|
65
|
+
The button remains keyboard accessible and retains focus when toggled. `expandTitle` and
|
|
66
|
+
`collapseTitle` set its accessible name. `compactTransition={false}` disables its geometry
|
|
67
|
+
transitions while preserving hover appearance; reduced motion disables both.
|
|
68
|
+
|
|
69
|
+
At the standard z-index, the compact tab extends 10 px over the edge of open All pages and custom
|
|
70
|
+
`panelItems` Drawers. Clicking it changes `compact` and keeps the panel open. Its transparent layer
|
|
71
|
+
does not intercept clicks outside the button. The layer uses
|
|
72
|
+
`calc(var(--gn-aside-header-z-index, 100) + 1)`. Consumer z-index settings determine custom stacking;
|
|
73
|
+
portaled Popups (including `asideRef` with `right-end`) may cover the tab and retain their normal
|
|
74
|
+
position and behavior. The compact button background follows the collapsed aside background,
|
|
75
|
+
then the general aside background, then the theme background. Matching an arbitrary
|
|
76
|
+
`customBackground` is not guaranteed.
|
|
77
|
+
|
|
78
|
+
In v7, `collapseButtonWrapper` decorates the edge control. Move any full-width additional content
|
|
79
|
+
previously rendered by this wrapper into `renderFooter`:
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
<PageLayoutAside
|
|
83
|
+
collapseButtonWrapper={(button) => <span className="collapse-decoration">{button}</span>}
|
|
84
|
+
renderFooter={({compact}) => (
|
|
85
|
+
<>
|
|
86
|
+
<div>Additional footer content</div>
|
|
87
|
+
<FooterItem id="account" title="Account" icon={Person} compact={compact} />
|
|
88
|
+
</>
|
|
89
|
+
)}
|
|
90
|
+
/>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
`PageLayoutAside` must participate directly in the flex layout of `PageLayout`. React components,
|
|
94
|
+
Fragments, Context providers, and Suspense are supported without extra DOM boxes. If a consumer
|
|
95
|
+
needs a DOM wrapper, give it `display: contents`; an ordinary block wrapper is unsupported.
|
|
96
|
+
The library does not change consumer wrapper styles automatically.
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
<PageLayout compact={compact}>
|
|
100
|
+
<div style={{display: 'contents'}}>
|
|
101
|
+
<PageLayoutAside menuItems={menuItems} onChangeCompact={setCompact} />
|
|
102
|
+
</div>
|
|
103
|
+
<PageLayout.Content>{children}</PageLayout.Content>
|
|
104
|
+
</PageLayout>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### Menu density
|
|
108
|
+
|
|
109
|
+
Use `menuDensity="compact"` to reduce the aside width, item height, icon size, spacing, and corner
|
|
110
|
+
radius without changing how the navigation behaves. Density is independent from the collapsed or
|
|
111
|
+
expanded state controlled by `compact`, so both properties can be combined.
|
|
112
|
+
|
|
113
|
+
```tsx
|
|
114
|
+
<AsideHeader
|
|
115
|
+
compact={compact}
|
|
116
|
+
menuDensity="compact"
|
|
117
|
+
menuItems={menuItems}
|
|
118
|
+
onChangeCompact={setCompact}
|
|
119
|
+
/>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
The default value is `default`, which preserves the previous dimensions. Compact density reduces
|
|
123
|
+
menu, subheader, and footer item icons; it does not resize the standard 24 px logo icon.
|
|
124
|
+
With the advanced layout pattern, pass `menuDensity` to `PageLayout`; `PageLayoutAside` inherits
|
|
125
|
+
the normalized value from context.
|
|
126
|
+
|
|
19
127
|
### Top decoration
|
|
20
128
|
|
|
21
129
|
Navigation highlights top section with Logo and Subheader items using `headerDecoration` props.
|
|
22
130
|
|
|
131
|
+
### Section dividers
|
|
132
|
+
|
|
133
|
+
`hideSectionDividers` hides the header/footer separators (including the collapsed header decoration SVG) and their spacing toward the menu. Header background, outer spacing, and separators inside the menu/Quick Access are preserved.
|
|
134
|
+
|
|
135
|
+
With `hideSectionDividers=true`, indicators appear at the menu scroll edges only while content is hidden beyond that edge: bottom at the start, both in the middle, top at the end, neither without overflow. They do not restore spacing. With `false`, the existing footer separator remains visible whenever the menu overflows, including at the end. The Quick Access separator stays inside the scrolling content and can coexist with these indicators. Setting `--gn-aside-header-divider-horizontal-color: transparent` also hides the scroll indicators.
|
|
136
|
+
|
|
137
|
+
The property is supported by `AsideHeader` and `PageLayoutAside`. `AsideFallback` supports hiding separators and spacing only: it has no scrollable menu and does not render scroll-edge indicators.
|
|
138
|
+
|
|
23
139
|
### Custom background
|
|
24
140
|
|
|
25
141
|
The component supports specific themization cases, e.g. image on background or splitting sections by color — using `customBackground`, `customBackgroundClassName` props.
|
|
@@ -48,11 +164,51 @@ The `onMenuItemsChanged` callback is required for adding extra component `All Pa
|
|
|
48
164
|
|
|
49
165
|
The elements of this block can have multiple tooltips.
|
|
50
166
|
|
|
167
|
+
#### Quick access
|
|
168
|
+
|
|
169
|
+
Set `enableQuickAccess` to render menu items marked with `quickAccess: true` in a separate section
|
|
170
|
+
and to expose pin controls for eligible leaf items. Quick access is controlled: the component never
|
|
171
|
+
mutates `menuItems`; update the item in `onQuickAccessChange` and pass the resulting array back.
|
|
172
|
+
Without `onQuickAccessChange`, marked items remain visible as a read-only section and pin controls
|
|
173
|
+
are hidden.
|
|
174
|
+
|
|
175
|
+
```tsx
|
|
176
|
+
const [menuItems, setMenuItems] = React.useState<AsideHeaderItem[]>(initialMenuItems);
|
|
177
|
+
|
|
178
|
+
<AsideHeader
|
|
179
|
+
{...props}
|
|
180
|
+
menuItems={menuItems}
|
|
181
|
+
enableQuickAccess
|
|
182
|
+
onQuickAccessChange={(changedItem, quickAccess) => {
|
|
183
|
+
setMenuItems((items) =>
|
|
184
|
+
items.map((item) => (item.id === changedItem.id ? {...item, quickAccess} : item)),
|
|
185
|
+
);
|
|
186
|
+
}}
|
|
187
|
+
/>;
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
Only visible regular leaf items can be pinned. Actions, dividers, group headers, **More**, and
|
|
191
|
+
**All pages** are excluded. Group children are eligible and can be pinned from either an expanded
|
|
192
|
+
group or its popup. In a compact sidebar, pin controls are available in group and **More** popups;
|
|
193
|
+
the solo item popup remains an informational label without actions.
|
|
194
|
+
|
|
195
|
+
By default, an active quick-access item is highlighted only in the quick-access section. Set
|
|
196
|
+
`quickAccessHighlightInMainMenu` to preserve its highlight in both places. Disable
|
|
197
|
+
`enableQuickAccess` to hide the section and pin controls without clearing item flags.
|
|
198
|
+
|
|
199
|
+
Quick access and the menu rows scroll together in a single container in all modes: when the column
|
|
200
|
+
does not fit the available height, both sections scroll as one while the header, footer, and
|
|
201
|
+
`aboveMenuContent` stay fixed. In a compact sidebar, items that do not fit still collapse under
|
|
202
|
+
**More**.
|
|
203
|
+
|
|
204
|
+
`quickAccess` and `pinned` serve different purposes: `quickAccess` duplicates an item in the quick
|
|
205
|
+
access section, while the existing `pinned` flag prevents an item from being hidden in **All pages**.
|
|
206
|
+
|
|
51
207
|
#### Content above the menu (`aboveMenuContent`)
|
|
52
208
|
|
|
53
209
|
Pass **`aboveMenuContent`** to render arbitrary content between the header (logo and `subheaderItems`) and the main **`menuItems`** list.
|
|
54
210
|
|
|
55
|
-
|
|
211
|
+
That block stays fixed above the scrollable column: quick access and the menu rows scroll together beneath it when the column does not fit the height.
|
|
56
212
|
|
|
57
213
|
**Example:**
|
|
58
214
|
|
|
@@ -181,42 +337,56 @@ export const Aside: FC = () => {
|
|
|
181
337
|
|
|
182
338
|
## Properties
|
|
183
339
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
|
192
|
-
|
|
|
193
|
-
|
|
|
194
|
-
|
|
|
195
|
-
|
|
|
196
|
-
|
|
|
197
|
-
|
|
|
198
|
-
|
|
|
199
|
-
|
|
|
200
|
-
|
|
|
201
|
-
|
|
|
202
|
-
|
|
|
203
|
-
|
|
|
204
|
-
|
|
|
205
|
-
|
|
|
206
|
-
|
|
|
207
|
-
|
|
|
208
|
-
|
|
|
209
|
-
|
|
|
210
|
-
|
|
|
211
|
-
|
|
|
212
|
-
|
|
|
213
|
-
|
|
|
214
|
-
|
|
|
215
|
-
|
|
|
216
|
-
|
|
|
217
|
-
|
|
|
218
|
-
|
|
|
219
|
-
|
|
|
340
|
+
The combined menu-group presentation adds one display option:
|
|
341
|
+
|
|
342
|
+
- `menuGroupNestedIcons?: boolean` (default `true`) shows child icons both in inline groups and
|
|
343
|
+
group popups.
|
|
344
|
+
|
|
345
|
+
With the advanced layout, pass `menuGroupNestedIcons` to `PageLayoutAside`.
|
|
346
|
+
|
|
347
|
+
| Name | Description | Type | Default |
|
|
348
|
+
| :----------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------: | :-----------------------: |
|
|
349
|
+
| className | HTML `class` attribute of the Logo | `string` | |
|
|
350
|
+
| collapseButtonWrapper | Wrapper for `CollapseButton` allowing customization of the default button appearance | `(defaultButton: React.ReactNode, data: {compact: boolean; onChangeCompact?: (compact: boolean) => void}) => React.ReactNode` | |
|
|
351
|
+
| collapseTitle | `CollapseButton` title for collapsing navigation | `string` | `"Свернуть"` `"Collapse"` |
|
|
352
|
+
| compact | Navigation visual state | `boolean` | `false` |
|
|
353
|
+
| compactTransition | Animate compact layout geometry and highlighting. Also available on `PageLayout`. | `boolean` | `true` |
|
|
354
|
+
| customBackground | `AsideHeader` background | `React.ReactNode` | |
|
|
355
|
+
| customBackgroundClassName | Override default background container's styles | `string` | |
|
|
356
|
+
| expandTitle | `CollapseButton` title for expanding navigation | `string` | `"Развернуть"` `"Expand"` |
|
|
357
|
+
| headerDecoration | Color background of the top section with logo and subheader items | `boolean` | `false` |
|
|
358
|
+
| hideSectionDividers | Hides header/footer separators and spacing, showing scroll-edge indicators instead. See [Section dividers](#section-dividers). | `boolean` | `false` |
|
|
359
|
+
| hideCollapseButton | Hiding `CollapseButton`. Use `compact` prop for setting default navigation state | `boolean` | `false` |
|
|
360
|
+
| logo | Logo container includes icon, title, handling clicks | [`Logo`](https://github.com/gravity-ui/navigation/blob/main/src/components/Logo/Readme.md#logo) | |
|
|
361
|
+
| menuItems | Items in the navigation middle section | `Array<AsideHeaderItem>` | `[]` |
|
|
362
|
+
| menuGroups | Declares groups for the middle section; see [`MenuGroup`](#menugroup). Items attach via `AsideHeaderItem.groupId`. | `MenuGroup[]` | |
|
|
363
|
+
| menuGroupNestedIcons | Shows child item icons in inline groups and group popups. | `boolean` | `true` |
|
|
364
|
+
| menuDensity | Visual density of the aside and menu items. `compact` reduces dimensions without changing interaction behavior. | `'default' \| 'compact'` | `'default'` |
|
|
365
|
+
| enableQuickAccess | Renders items marked with `quickAccess` in a separate section and enables pin controls when `onQuickAccessChange` is provided. | `boolean` | `false` |
|
|
366
|
+
| quickAccessHighlightInMainMenu | Keeps a pinned current item highlighted in the main menu as well as in quick access. | `boolean` | `false` |
|
|
367
|
+
| defaultMenuItems | Default list for resetting **All pages** edits | `Array<AsideHeaderItem>` | |
|
|
368
|
+
| menuOverflow | Overflow behavior for the composite menu; see [`menuOverflow`](#composite-menu-overflow-menuoverflow). **`collapse`** (default): extras under «More». **`scroll`**: scrollable column. Compact sidebar always uses **`collapse`**. | `'collapse' \| 'scroll'` | `'collapse'` |
|
|
369
|
+
| collapsedMenuGroupIds | Controlled map (`MenuGroup.id` → collapsed) when `menuOverflow` is **`scroll`** | `Record<string, boolean>` | |
|
|
370
|
+
| defaultCollapsedMenuGroupIds | Initial group collapsed state when `collapsedMenuGroupIds` is uncontrolled | `Record<string, boolean>` | |
|
|
371
|
+
| editMenuProps | Optional hooks for the **All pages** panel; see [`editMenuProps`](#editmenuprops). | — | |
|
|
372
|
+
| menuMoreTitle | Additional element title of menuItems if elements don't fit | `string` | `"Ещё"` `"More"` |
|
|
373
|
+
| onChangeCompact | Callback will be called when changing navigation visual state | `(compact: boolean) => void;` | |
|
|
374
|
+
| onClosePanel | Callback will be called when closing panel. You can add panels via `PanelItems` prop | `() => void;` | |
|
|
375
|
+
| onMenuItemsChanged | Callback will be called when updating list of the menuItems in `AllPagesPanel` | `(items: Array<AsideHeaderItem>) => void` | |
|
|
376
|
+
| onQuickAccessChange | Called with the original menu item and its requested next quick-access state. Use it to update controlled `menuItems`. | `(item: AsideHeaderItem, quickAccess: boolean) => void` | |
|
|
377
|
+
| onMenuGroupsChanged | Callback **only from All pages**: user toggled **menu group** visibility (`MenuGroup.hidden`) via group header pin. Use controlled `menuGroups`; not emitted for programmatic updates unrelated to All pages. | `(menuGroups: Array<MenuGroup>) => void` | |
|
|
378
|
+
| onMenuMoreClick | Callback will be called when some items don't fit and "more" button is clicked | `() => void;` | |
|
|
379
|
+
| onToggleMenuGroupCollapsed | User toggled group expand/collapse in **`menuOverflow='scroll'`** layout; combine with **`collapsedMenuGroupIds`** when controlled | `(groupId: string) => void` | |
|
|
380
|
+
| onAllPagesClick | Callback will be called when "All pages" button is clicked | `() => void;` | |
|
|
381
|
+
| openModalSubscriber | Function notifies `AsideHeader` about Modals visibility changes | `( (open: boolean) => void) => void` | |
|
|
382
|
+
| aboveMenuContent | Optional content between the header and **`menuItems`**; stays fixed above the scrollable column (quick access and menu). | `React.ReactNode` | |
|
|
383
|
+
| panelItems | Items for `Drawer` component. Used for show additional information over main content | [`Array<DrawerItem>`](https://github.com/gravity-ui/navigation/tree/main/src/components/Drawer#draweritem-props) | `[]` |
|
|
384
|
+
| renderContent | Function rendering the main content at the right of the `AsideHeader` | `(data: {size: number}) => React.ReactNode` | |
|
|
385
|
+
| renderFooter | Function rendering the navigation bottom section | `(data: {size: number}) => React.ReactNode` | |
|
|
386
|
+
| ref | `ref` to target popup anchor | `React.ForwardedRef<HTMLDivElement, AsideHeaderProps>` | |
|
|
387
|
+
| subheaderItems | Items in the navigation top section under Logo | `Array<AsideHeaderItem>` | `[]` |
|
|
388
|
+
| topAlert | The container above the navigation based on the uikit `Alert` component | `TopAlert` | |
|
|
389
|
+
| qa | The value to be passed to `data-qa` attribute of the `AsideHeader` container | `string` | |
|
|
220
390
|
|
|
221
391
|
### Composite menu overflow (`menuOverflow`)
|
|
222
392
|
|
|
@@ -227,30 +397,45 @@ The middle section uses a composite bar. **`menuOverflow`** chooses how overflow
|
|
|
227
397
|
| **`collapse`** | Default. Items that do not fit are collected under a **«More»** entry (popup). |
|
|
228
398
|
| **`scroll`** | The menu list becomes a scrollable column so every row stays reachable without **«More»**. |
|
|
229
399
|
|
|
230
|
-
When the sidebar is **`compact`** (collapsed to icons),
|
|
400
|
+
When the sidebar is **`compact`** (collapsed to icons), items that do not fit **always** collapse under **«More»**, regardless of `menuOverflow`; the column itself (quick access and menu) scrolls in a single container when height runs out.
|
|
231
401
|
|
|
232
|
-
With **`menuOverflow="scroll"`** and **`menuGroups`**, group headers can expand/collapse inline. Use **`collapsedMenuGroupIds`** / **`defaultCollapsedMenuGroupIds`** and **`onToggleMenuGroupCollapsed`** to control or observe that state (keys are `MenuGroup.id`).
|
|
402
|
+
With **`menuOverflow="scroll"`** and **`menuGroups`**, group headers can expand/collapse inline. Use **`collapsedMenuGroupIds`** / **`defaultCollapsedMenuGroupIds`** and **`onToggleMenuGroupCollapsed`** to control or observe that state (keys are `MenuGroup.id`). An expanded group shows its children as an inline hierarchy; a collapsed group exposes the same children in a popup on hover/focus. `menuGroupNestedIcons` controls child icons in both representations.
|
|
403
|
+
|
|
404
|
+
```tsx
|
|
405
|
+
const [collapsedGroups, setCollapsedGroups] = React.useState<Record<string, boolean>>({});
|
|
406
|
+
|
|
407
|
+
<AsideHeader
|
|
408
|
+
{...props}
|
|
409
|
+
menuOverflow="scroll"
|
|
410
|
+
menuGroups={menuGroups}
|
|
411
|
+
collapsedMenuGroupIds={collapsedGroups}
|
|
412
|
+
onToggleMenuGroupCollapsed={(groupId) => {
|
|
413
|
+
setCollapsedGroups((current) => ({...current, [groupId]: !current[groupId]}));
|
|
414
|
+
}}
|
|
415
|
+
/>;
|
|
416
|
+
```
|
|
233
417
|
|
|
234
418
|
**`defaultMenuItems`** is the baseline list used when resetting **All pages** edits. Configure sorting, pins, group visibility toggles, and reset via **[`editMenuProps`](#editmenuprops)** below.
|
|
235
419
|
|
|
236
|
-
In compact mode, groups collapse to a single icon anchor (`MenuGroup.icon`); the group's children are revealed in a popup whose heading is taken from `MenuGroup.popupTitle`.
|
|
420
|
+
In compact mode, groups collapse to a single icon anchor (`MenuGroup.icon`); the group's children are revealed in a popup whose heading is taken from `MenuGroup.popupTitle`. A standalone compact item uses a lightweight dark popup surface for its single-line label and preserves high-contrast mode as `dark-hc`. Group and overflow popups keep the current UIKit theme.
|
|
237
421
|
Inline expand/collapse (**`collapsedMenuGroupIds`** / **`onToggleMenuGroupCollapsed`**) does not apply here — it is only used when **`menuOverflow="scroll"`**.
|
|
238
422
|
|
|
239
423
|
### `MenuGroup`
|
|
240
424
|
|
|
241
425
|
Shape for entries in `menuGroups`. When `menuGroups` is set, middle-section items can reference a group with [`AsideHeaderItem.groupId`](#asideheaderitem) equal to `MenuGroup.id`. The composite bar renders group headers and nesting; visibility and collapse behavior are controlled via `AsideHeader` props (see `menuOverflow`, `onMenuGroupsChanged`, `collapsedMenuGroupIds`, etc.).
|
|
242
426
|
|
|
243
|
-
| Name
|
|
244
|
-
|
|
|
245
|
-
| `id`
|
|
246
|
-
| `title`
|
|
247
|
-
| `icon`
|
|
248
|
-
| `iconSize`
|
|
249
|
-
| `hidden`
|
|
250
|
-
| `popupTitle`
|
|
251
|
-
| `onItemClick`
|
|
252
|
-
| `href`
|
|
253
|
-
| `
|
|
427
|
+
| Name | Description |
|
|
428
|
+
| :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
429
|
+
| `id` | Stable group identifier; must match `AsideHeaderItem.groupId` for items that belong to this group. |
|
|
430
|
+
| `title` | Group label shown on the inline group header in the expanded sidebar (and in flows that use this title). |
|
|
431
|
+
| `icon` | Optional [`Icon`](https://github.com/gravity-ui/uikit/tree/main/src/components/Icon) data for the group header. |
|
|
432
|
+
| `iconSize` | Group header icon size; set it to the same value as on menu items so the group row matches them (e.g. in the **All pages** panel). |
|
|
433
|
+
| `hidden` | When `true`, hides the group from the main navigation; items in that group are omitted there. The **All pages** panel can still surface the group row for visibility edits when callbacks like `onMenuGroupsChanged` are used. |
|
|
434
|
+
| `popupTitle` | Optional heading used in a popup that lists a group’s children. Does not replace `title` for the inline group header or other surfaces. |
|
|
435
|
+
| `onItemClick` | Optional main action for the group header (same signature as `AsideHeaderItem.onItemClick`; receives the synthetic group-header item). When the group has its own action (`onItemClick` and/or `href`), in the inline layout (`menuOverflow="scroll"`, expanded sidebar) clicking the header row triggers the action like a regular menu item, and **only the chevron** toggles expand/collapse. Without an own action the whole header row toggles the group, as before. Such groups are also listed as a clickable row in the **All pages** panel (view mode). |
|
|
436
|
+
| `href` | Optional link for the group header; renders the header row as an anchor. Same click-behavior split as `onItemClick`. |
|
|
437
|
+
| `current` | Marks the group header row as the current page, like `AsideHeaderItem.current`. Only the header row is highlighted; nested items keep their own states. |
|
|
438
|
+
| `hideItemsInAllPages` | When `true` and the group has its own action (`onItemClick` and/or `href`), the group items are not listed in the **All pages** panel (view mode) — the group is represented only by its clickable header row. Has no effect for groups without an action. |
|
|
254
439
|
|
|
255
440
|
### `editMenuProps`
|
|
256
441
|
|
|
@@ -267,6 +452,11 @@ Optional configuration for the **All pages** panel (drag-and-drop, pins, reset).
|
|
|
267
452
|
|
|
268
453
|
### `AsideHeaderItem`
|
|
269
454
|
|
|
455
|
+
`titleLines?: 1 | 2` controls the maximum title lines in the expanded sidebar. When omitted, the
|
|
456
|
+
legacy two-line clamp is preserved.
|
|
457
|
+
Compact sidebar and popup rows always use one line. A two-line row is included in menu overflow
|
|
458
|
+
measurements, so it does not overlap the footer or incorrectly move neighboring items under More.
|
|
459
|
+
|
|
270
460
|
| Name | Description | Type | Default |
|
|
271
461
|
| :--------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------: |
|
|
272
462
|
| afterMoreButton | The menu item will be placed in the end, even item don't fit | `boolean` | |
|
|
@@ -284,8 +474,10 @@ Optional configuration for the **All pages** panel (drag-and-drop, pins, reset).
|
|
|
284
474
|
| onItemClickCapture | Callback will be called when clicking on the item | ` (event: React.SyntheticEvent) => void` | |
|
|
285
475
|
| order | Determine the display order in the navigation | `number` | |
|
|
286
476
|
| pinned | The parameter restricts hiding menu item | `boolean` | `false` |
|
|
477
|
+
| quickAccess | Renders an eligible leaf item in the quick-access section when `enableQuickAccess` is enabled. This is independent from the All pages `pinned` flag. | `boolean` | `false` |
|
|
287
478
|
| rightAdornment | Customize right side of the menu item | `React.ReactNode` | |
|
|
288
479
|
| title | The menu item title | `React.ReactNode` | |
|
|
480
|
+
| titleLines | Maximum title lines in the expanded sidebar. Collapsed (icon-only) sidebar and popup rows always use one line. | `1 \| 2` | `2` |
|
|
289
481
|
| tooltipText | Tooltip content | `React.ReactNode` | |
|
|
290
482
|
| type | The menu item type changes appearance: `"regular"`, `"action"`, `"divider"` | `string` | `"regular"` |
|
|
291
483
|
| qa | The value to be passed to `data-qa` attribute | `string` | |
|
|
@@ -334,6 +526,7 @@ You can customize the inner content, make alert closeable if necessary. For read
|
|
|
334
526
|
| `--gn-aside-header-divider-vertical-color` | Vertical divider line color between `AsideHeader` and content |
|
|
335
527
|
| `--gn-aside-header-menu-group-tree-line-color` | Tree connector lines for nested menu groups (inactive segments) |
|
|
336
528
|
| `--gn-aside-header-menu-group-tree-line-active-color` | Tree connector lines for the active branch in nested menu groups |
|
|
529
|
+
| `--gn-aside-header-floating-surface-box-shadow` | Box shadow for navigation popups |
|
|
337
530
|
| `--gn-top-alert-height` | **Read only**.`AsideHeader` top alert height |
|
|
338
531
|
| `--gn-aside-header-padding-top` | Navigation top padding. May be helpful when logo and subheader items hide |
|
|
339
532
|
| Item | |
|
|
@@ -1 +1,9 @@
|
|
|
1
|
-
.AsideHeader-module__gn-aside-header___Z0Sa7{--gn-aside-header-min-width:
|
|
1
|
+
.AsideHeader-module__gn-aside-header___Z0Sa7{--gn-aside-header-min-width:var(--_--gn-aside-header-density-compact-width,56px);--_--item-margin-inline:var(
|
|
2
|
+
--_--gn-aside-header-density-item-margin-inline,8px
|
|
3
|
+
);--_--item-expanded-radius:var(
|
|
4
|
+
--_--gn-aside-header-density-item-expanded-radius,8px
|
|
5
|
+
);--_--item-icon-background-size:var(
|
|
6
|
+
--gn-aside-header-item-icon-background-size,var(--_--gn-aside-header-density-icon-background-size,38px)
|
|
7
|
+
);--_--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);--_--section-divider-gap:var(--g-spacing-1);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.AsideHeader-module__gn-aside-header__compact-transition___bBGfN{--_--gn-aside-width-transition:width 0.2s ease-in-out;--_--gn-aside-collapse-geometry-transition:inset-inline-end 0.2s ease-in-out,width 0.2s ease-in-out,border-radius 0.2s ease-in-out;--_--gn-aside-drawer-transition:left 0.2s ease-in-out,background-color var(--_--animation-duration,300ms)}.AsideHeader-module__gn-aside-header__compact-transition_disabled___ztpdX{--_--gn-aside-width-transition:none;--_--gn-aside-collapse-geometry-transition:none;--_--gn-aside-drawer-transition:background-color var(--_--animation-duration,300ms)}.AsideHeader-module__gn-aside-header__aside___AyP0y{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));overflow:hidden;position:sticky;top:var(--gn-top-alert-height,0);transition:var(--_--gn-aside-width-transition);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.AsideHeader-module__gn-aside-header__aside___AyP0y:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:"";height:100%;inset-inline-end:0;position:absolute;top:0;width:1px;z-index:2}.AsideHeader-module__gn-aside-header__aside-popup-anchor___N3tgM{inset:0;position:absolute;z-index:1}.AsideHeader-module__gn-aside-header__aside-content___w5GOS{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;min-height:0;overflow:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:var(--gn-aside-header-size);z-index:2}.AsideHeader-module__gn-aside-header__aside-content___w5GOS>.AsideHeader-module__gn-aside-header-logo___6MdXx{margin:8px 0}.AsideHeader-module__gn-aside-header__aside-content_with-decoration___UsCye{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))}.AsideHeader-module__gn-aside-header__aside-custom-background___-bqdE{bottom:0;display:flex;position:absolute;top:0;transition:var(--_--gn-aside-width-transition);width:var(--gn-aside-header-size);z-index:-1}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__aside-content___w5GOS{background:transparent}.AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] [data-gn-aside-divider]{flex-shrink:0}.AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] .AsideHeader-module__gn-aside-header__aside-content___w5GOS{overflow:visible}.AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] .g-list__item, .AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] .g-list__item-content{min-width:0;overflow:visible}.AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] [data-gn-aside-scrollport]{width:var(--_--gn-aside-header-expanded-width)}.AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] .AsideHeader-module__gn-aside-header__unified-menu-content___cpugB{width:var(--gn-aside-header-size)}.AsideHeader-module__gn-aside-header__header___m5aIU{--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}.AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-divider___lIG-e{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}.AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO: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}.AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-bottom-divider___x9Bzo{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}.AsideHeader-module__gn-aside-header__aside-content_with-quick-access___Yucty:not(.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB) .AsideHeader-module__gn-aside-header__header___m5aIU{padding-bottom:var(--_--section-divider-gap)}.AsideHeader-module__gn-aside-header__aside-content_with-quick-access___Yucty:not(.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB) .AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-bottom-divider___x9Bzo{bottom:0}.AsideHeader-module__gn-aside-header__aside-content_with-quick-access___Yucty:not(.AsideHeader-module__gn-aside-header__aside-content_with-quick-access-items___oU0Yz):not(.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB) .AsideHeader-module__gn-aside-header__header___m5aIU{margin-bottom:var(--_--section-divider-gap)}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header___m5aIU:before, .AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO .AsideHeader-module__gn-aside-header__header-divider___lIG-e{display:block}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO .AsideHeader-module__gn-aside-header__header-bottom-divider___x9Bzo{display:none}.AsideHeader-module__gn-aside-header__logo-button___5u2iH .AsideHeader-module__gn-aside-header__logo-icon-place___3Oo9i{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__logo___QvKKT{--_--gn-logo-height:var(
|
|
8
|
+
--_--gn-aside-header-density-item-height,40px
|
|
9
|
+
)}.AsideHeader-module__gn-aside-header__quick-access___ykXmy{box-sizing:border-box;flex:none;margin-bottom:var(--_--section-divider-gap);padding-block:var(--_--section-divider-gap);position:relative;width:100%}.AsideHeader-module__gn-aside-header__quick-access-divider___AzkVl{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:0;content:"";height:1px;left:var(--_--item-margin-inline);position:absolute;right:var(--_--item-margin-inline);width:auto;z-index:1}.AsideHeader-module__gn-aside-header__quick-access-title___im4TL{color:var(--g-color-text-secondary);font-family:var(--g-text-caption-font-family);font-size:var(--g-text-caption-2-font-size);font-weight:var(--g-text-caption-font-weight);line-height:var(--g-text-caption-2-line-height);margin-inline:var(--_--item-margin-inline);padding-inline:calc(var(--_--gn-aside-header-density-item-height, 40px) + var(--_--gn-aside-header-density-item-title-gap, var(--g-spacing-2))) var(--_--gn-aside-header-density-item-title-gap-end,var(--g-spacing-4));padding-bottom:var(--g-spacing-1);user-select:none}.AsideHeader-module__gn-aside-header__unified-menu-scroll___EHnK-{flex:1 1 auto;min-height:0}.AsideHeader-module__gn-aside-header__unified-menu-content___cpugB{display:flex;flex-direction:column;min-height:100%;position:relative;z-index:0}.AsideHeader-module__gn-aside-header___Z0Sa7 [data-gn-aside-current-container]>:not([data-gn-aside-current-indicator-layer]):not([data-gn-aside-divider]){position:relative;z-index:1}.AsideHeader-module__gn-aside-header__menu-items___SOI2-{flex-grow:1}.AsideHeader-module__gn-aside-header__menu-item___q2y31:not(:has([data-type=action])){margin-inline:var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__menu-item___q2y31:has([data-type=regular]), .AsideHeader-module__gn-aside-header__menu-item_type_regular___XYYbc, .AsideHeader-module__gn-aside-header__root-menu-item___eNfkk[class]:hover{border-radius:var(--gn-aside-header-item-expanded-radius,var(--_--item-expanded-radius))}.AsideHeader-module__gn-aside-header__collapse-fallback___R6O7X{flex-shrink:0;height:var(--_--gn-aside-header-density-footer-item-height,32px)}.AsideHeader-module__gn-aside-header__footer___vmoTl{display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) var(--_--item-margin-inline);position:relative}.AsideHeader-module__gn-aside-header__footer___vmoTl .AsideHeader-module__gn-aside-header__footer-divider___9Jewp{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));content:"";height:1px;left:calc(var(--_--item-margin-inline)*-1);opacity:0;pointer-events:none;position:absolute;right:calc(var(--_--item-margin-inline)*-1);top:calc(var(--g-spacing-2)*-1);transition:opacity .3s ease-in-out}.AsideHeader-module__gn-aside-header__footer_with-divider___66E1w .AsideHeader-module__gn-aside-header__footer-divider___9Jewp{opacity:1}.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__header___m5aIU{margin-bottom:0;padding-bottom:0}.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__header___m5aIU:before{height:100%}.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__footer-divider___9Jewp, .AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-bottom-divider___x9Bzo, .AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-divider___lIG-e{display:none}.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__footer___vmoTl{margin-top:0}.AsideHeader-module__gn-aside-header__panels___-fdu4{z-index:var(--gn-aside-header-panel-z-index,98)}.AsideHeader-module__gn-aside-header__panels___-fdu4.g-drawer[data-floating-ui-status]{transition:var(--_--gn-aside-drawer-transition)}.AsideHeader-module__gn-aside-header__panel___HywH6, .AsideHeader-module__gn-aside-header__panel___HywH6.g-drawer__item{bottom:0;height:auto;top:0}.AsideHeader-module__gn-aside-header__pane-container___y-v2e{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.AsideHeader-module__gn-aside-header__top-alert___hY12r{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.AsideHeader-module__gn-aside-header__content___4-mBl{margin-top:var(--gn-top-alert-height,0);transition:var(--_--gn-aside-width-transition);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}@media (prefers-reduced-motion:reduce){.AsideHeader-module__gn-aside-header__aside-custom-background___-bqdE, .AsideHeader-module__gn-aside-header__aside___AyP0y, .AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__panels___-fdu4.g-drawer[data-floating-ui-status]{transition:none}}.AsideHeader-module__gn-aside-header__all-pages-panel___O94IU{width:fit-content!important}
|
|
@@ -5,8 +5,8 @@ import { PageLayout } from './components/PageLayout/PageLayout.js';
|
|
|
5
5
|
import { PageLayoutAside } from './components/PageLayout/PageLayoutAside.js';
|
|
6
6
|
|
|
7
7
|
const AsideHeader = React__default.forwardRef((_a, ref) => {
|
|
8
|
-
var { compact, className, topAlert } = _a, props = __rest(_a, ["compact", "className", "topAlert"]);
|
|
9
|
-
return (React__default.createElement(PageLayout, { compact: compact, className: className, topAlert: topAlert },
|
|
8
|
+
var { compact, compactTransition, className, topAlert, menuDensity } = _a, props = __rest(_a, ["compact", "compactTransition", "className", "topAlert", "menuDensity"]);
|
|
9
|
+
return (React__default.createElement(PageLayout, { compact: compact, compactTransition: compactTransition, className: className, topAlert: topAlert, menuDensity: menuDensity },
|
|
10
10
|
React__default.createElement(PageLayoutAside, Object.assign({ ref: ref }, props)),
|
|
11
11
|
React__default.createElement(PageLayout.Content, { renderContent: props.renderContent })));
|
|
12
12
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AsideHeader.js","sources":["../../../../../src/components/AsideHeader/AsideHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport {PageLayout} from './components/PageLayout/PageLayout';\nimport {PageLayoutAside} from './components/PageLayout/PageLayoutAside';\nimport {AsideHeaderProps} from './types';\n\nexport const AsideHeader = React.forwardRef<HTMLDivElement, AsideHeaderProps>(\n ({compact, className, topAlert, ...props}, ref) => {\n return (\n <PageLayout
|
|
1
|
+
{"version":3,"file":"AsideHeader.js","sources":["../../../../../src/components/AsideHeader/AsideHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport {PageLayout} from './components/PageLayout/PageLayout';\nimport {PageLayoutAside} from './components/PageLayout/PageLayoutAside';\nimport {AsideHeaderProps} from './types';\n\nexport const AsideHeader = React.forwardRef<HTMLDivElement, AsideHeaderProps>(\n ({compact, compactTransition, className, topAlert, menuDensity, ...props}, ref) => {\n return (\n <PageLayout\n compact={compact}\n compactTransition={compactTransition}\n className={className}\n topAlert={topAlert}\n menuDensity={menuDensity}\n >\n <PageLayoutAside ref={ref} {...props} />\n <PageLayout.Content renderContent={props.renderContent} />\n </PageLayout>\n );\n },\n);\n\nAsideHeader.displayName = 'AsideHeader';\n"],"names":["React"],"mappings":";;;;;AAMO,MAAM,WAAW,GAAGA,cAAK,CAAC,UAAU,CACvC,CAAC,EAAwE,EAAE,GAAG,KAAI;AAAjF,IAAA,IAAA,EAAC,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAW,GAAA,EAAA,EAAN,KAAK,GAAA,MAAA,CAAA,EAAA,EAAvE,wEAAwE,CAAD;IACpE,QACIA,6BAAC,UAAU,EAAA,EACP,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EAAA;AAExB,QAAAA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAC,MAAA,CAAA,MAAA,CAAA,EAAA,GAAG,EAAE,GAAG,EAAA,EAAM,KAAK,CAAI,CAAA;AACxC,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,CAAC,OAAO,EAAA,EAAC,aAAa,EAAE,KAAK,CAAC,aAAa,EAAA,CAAI,CACjD;AAErB,CAAC;AAGL,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var styles = {"g-root":"AsideHeader-module__g-root___EuNRw","gRoot":"AsideHeader-module__g-root___EuNRw","gn-aside-header":"AsideHeader-module__gn-aside-header___Z0Sa7","gnAsideHeader":"AsideHeader-module__gn-aside-header___Z0Sa7","gn-aside-
|
|
1
|
+
var styles = {"g-root":"AsideHeader-module__g-root___EuNRw","gRoot":"AsideHeader-module__g-root___EuNRw","gn-aside-header":"AsideHeader-module__gn-aside-header___Z0Sa7","gnAsideHeader":"AsideHeader-module__gn-aside-header___Z0Sa7","gn-aside-header__compact-transition":"AsideHeader-module__gn-aside-header__compact-transition___bBGfN","gnAsideHeaderCompactTransition":"AsideHeader-module__gn-aside-header__compact-transition___bBGfN","gn-aside-header__compact-transition_disabled":"AsideHeader-module__gn-aside-header__compact-transition_disabled___ztpdX","gnAsideHeaderCompactTransitionDisabled":"AsideHeader-module__gn-aside-header__compact-transition_disabled___ztpdX","gn-aside-header__aside":"AsideHeader-module__gn-aside-header__aside___AyP0y","gnAsideHeaderAside":"AsideHeader-module__gn-aside-header__aside___AyP0y","gn-aside-header__aside-popup-anchor":"AsideHeader-module__gn-aside-header__aside-popup-anchor___N3tgM","gnAsideHeaderAsidePopupAnchor":"AsideHeader-module__gn-aside-header__aside-popup-anchor___N3tgM","gn-aside-header__aside-content":"AsideHeader-module__gn-aside-header__aside-content___w5GOS","gnAsideHeaderAsideContent":"AsideHeader-module__gn-aside-header__aside-content___w5GOS","gn-aside-header-logo":"AsideHeader-module__gn-aside-header-logo___6MdXx","gnAsideHeaderLogo":"AsideHeader-module__gn-aside-header__logo___QvKKT","gn-aside-header__aside-content_with-decoration":"AsideHeader-module__gn-aside-header__aside-content_with-decoration___UsCye","gnAsideHeaderAsideContentWithDecoration":"AsideHeader-module__gn-aside-header__aside-content_with-decoration___UsCye","gn-aside-header__aside-custom-background":"AsideHeader-module__gn-aside-header__aside-custom-background___-bqdE","gnAsideHeaderAsideCustomBackground":"AsideHeader-module__gn-aside-header__aside-custom-background___-bqdE","gn-aside-header_compact":"AsideHeader-module__gn-aside-header_compact___z-nL-","gnAsideHeaderCompact":"AsideHeader-module__gn-aside-header_compact___z-nL-","gn-aside-header__unified-menu-content":"AsideHeader-module__gn-aside-header__unified-menu-content___cpugB","gnAsideHeaderUnifiedMenuContent":"AsideHeader-module__gn-aside-header__unified-menu-content___cpugB","gn-aside-header__header":"AsideHeader-module__gn-aside-header__header___m5aIU","gnAsideHeaderHeader":"AsideHeader-module__gn-aside-header__header___m5aIU","gn-aside-header__header-divider":"AsideHeader-module__gn-aside-header__header-divider___lIG-e","gnAsideHeaderHeaderDivider":"AsideHeader-module__gn-aside-header__header-divider___lIG-e","gn-aside-header__header_with-decoration":"AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO","gnAsideHeaderHeaderWithDecoration":"AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO","gn-aside-header__header-bottom-divider":"AsideHeader-module__gn-aside-header__header-bottom-divider___x9Bzo","gnAsideHeaderHeaderBottomDivider":"AsideHeader-module__gn-aside-header__header-bottom-divider___x9Bzo","gn-aside-header__aside-content_with-quick-access":"AsideHeader-module__gn-aside-header__aside-content_with-quick-access___Yucty","gnAsideHeaderAsideContentWithQuickAccess":"AsideHeader-module__gn-aside-header__aside-content_with-quick-access___Yucty","gn-aside-header__aside-content_hide-section-dividers":"AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB","gnAsideHeaderAsideContentHideSectionDividers":"AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB","gn-aside-header__aside-content_with-quick-access-items":"AsideHeader-module__gn-aside-header__aside-content_with-quick-access-items___oU0Yz","gnAsideHeaderAsideContentWithQuickAccessItems":"AsideHeader-module__gn-aside-header__aside-content_with-quick-access-items___oU0Yz","gn-aside-header__logo-button":"AsideHeader-module__gn-aside-header__logo-button___5u2iH","gnAsideHeaderLogoButton":"AsideHeader-module__gn-aside-header__logo-button___5u2iH","gn-aside-header__logo-icon-place":"AsideHeader-module__gn-aside-header__logo-icon-place___3Oo9i","gnAsideHeaderLogoIconPlace":"AsideHeader-module__gn-aside-header__logo-icon-place___3Oo9i","gn-aside-header__logo":"AsideHeader-module__gn-aside-header__logo___QvKKT","gn-aside-header__quick-access":"AsideHeader-module__gn-aside-header__quick-access___ykXmy","gnAsideHeaderQuickAccess":"AsideHeader-module__gn-aside-header__quick-access___ykXmy","gn-aside-header__quick-access-divider":"AsideHeader-module__gn-aside-header__quick-access-divider___AzkVl","gnAsideHeaderQuickAccessDivider":"AsideHeader-module__gn-aside-header__quick-access-divider___AzkVl","gn-aside-header__quick-access-title":"AsideHeader-module__gn-aside-header__quick-access-title___im4TL","gnAsideHeaderQuickAccessTitle":"AsideHeader-module__gn-aside-header__quick-access-title___im4TL","gn-aside-header__unified-menu-scroll":"AsideHeader-module__gn-aside-header__unified-menu-scroll___EHnK-","gnAsideHeaderUnifiedMenuScroll":"AsideHeader-module__gn-aside-header__unified-menu-scroll___EHnK-","gn-aside-header__menu-items":"AsideHeader-module__gn-aside-header__menu-items___SOI2-","gnAsideHeaderMenuItems":"AsideHeader-module__gn-aside-header__menu-items___SOI2-","gn-aside-header__menu-item":"AsideHeader-module__gn-aside-header__menu-item___q2y31","gnAsideHeaderMenuItem":"AsideHeader-module__gn-aside-header__menu-item___q2y31","gn-aside-header__menu-item_type_regular":"AsideHeader-module__gn-aside-header__menu-item_type_regular___XYYbc","gnAsideHeaderMenuItemTypeRegular":"AsideHeader-module__gn-aside-header__menu-item_type_regular___XYYbc","gn-aside-header__root-menu-item":"AsideHeader-module__gn-aside-header__root-menu-item___eNfkk","gnAsideHeaderRootMenuItem":"AsideHeader-module__gn-aside-header__root-menu-item___eNfkk","gn-aside-header__collapse-fallback":"AsideHeader-module__gn-aside-header__collapse-fallback___R6O7X","gnAsideHeaderCollapseFallback":"AsideHeader-module__gn-aside-header__collapse-fallback___R6O7X","gn-aside-header__footer":"AsideHeader-module__gn-aside-header__footer___vmoTl","gnAsideHeaderFooter":"AsideHeader-module__gn-aside-header__footer___vmoTl","gn-aside-header__footer-divider":"AsideHeader-module__gn-aside-header__footer-divider___9Jewp","gnAsideHeaderFooterDivider":"AsideHeader-module__gn-aside-header__footer-divider___9Jewp","gn-aside-header__footer_with-divider":"AsideHeader-module__gn-aside-header__footer_with-divider___66E1w","gnAsideHeaderFooterWithDivider":"AsideHeader-module__gn-aside-header__footer_with-divider___66E1w","gn-aside-header__panels":"AsideHeader-module__gn-aside-header__panels___-fdu4","gnAsideHeaderPanels":"AsideHeader-module__gn-aside-header__panels___-fdu4","gn-aside-header__panel":"AsideHeader-module__gn-aside-header__panel___HywH6","gnAsideHeaderPanel":"AsideHeader-module__gn-aside-header__panel___HywH6","gn-aside-header__pane-container":"AsideHeader-module__gn-aside-header__pane-container___y-v2e","gnAsideHeaderPaneContainer":"AsideHeader-module__gn-aside-header__pane-container___y-v2e","gn-aside-header__top-alert":"AsideHeader-module__gn-aside-header__top-alert___hY12r","gnAsideHeaderTopAlert":"AsideHeader-module__gn-aside-header__top-alert___hY12r","gn-aside-header__content":"AsideHeader-module__gn-aside-header__content___4-mBl","gnAsideHeaderContent":"AsideHeader-module__gn-aside-header__content___4-mBl","gn-aside-header__all-pages-panel":"AsideHeader-module__gn-aside-header__all-pages-panel___O94IU","gnAsideHeaderAllPagesPanel":"AsideHeader-module__gn-aside-header__all-pages-panel___O94IU"};
|
|
2
2
|
|
|
3
3
|
export { styles as default };
|
|
4
4
|
//# sourceMappingURL=AsideHeader.module.scss.js.map
|