@gravity-ui/navigation 3.4.1 → 3.5.0

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

@@ -16,3 +16,4 @@ export declare const Fallback: import("@storybook/csf").AnnotatedStoryFn<import(
 }>;
 /** @type {StoryFn} */
 export declare function LineClamp(): React.JSX.Element;
+export declare const CollapseButtonWrapper: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;

package/build/cjs/components/AsideHeader/__stories__/moc.d.ts

@@ -3,4 +3,11 @@ import { AsideHeaderProps } from '../types';
 export declare const EMPTY_CONTEXT_VALUE: AsideHeaderContextType;
 export declare const menuItemsShowcase: AsideHeaderProps['menuItems'];
 export declare const text = "\nDid you attend? He sang by grove ripe -\nThe bard of love, the singer of his mourning.\nWhen fields were silent by the early morning,\nTo sad and simple sounds of a pipe\nDid you attend?\n\nDid you behold in dark of forest leaf\nThe bard of love, the singer of his sadness?\nThe trace of tears, the smile, the utter paleness,\nThe quiet look, full of eternal grief,\nDid you behold?\n\nThen did you sigh when hearing how cries\nThe bard of love, the singer of his dole?\nWhen in the woods you saw the young man, sole,\nAnd met the look of his extinguished eyes,\nThen did you sigh?\n";
+export declare const DEFAULT_LOGO: {
+    text: string;
+    icon: import("node_modules/@gravity-ui/uikit/build/esm/components/Icon/types").SVGIconData;
+    href: string;
+    onClick: () => void;
+    'aria-label': string;
+};
 export declare const menuItemsClamped: import("../..").MenuItem[];

package/build/cjs/components/AsideHeader/components/CollapseButton/CollapseButton.d.ts

@@ -3,4 +3,4 @@ import './CollapseButton.scss';
 export interface CollapseButtonProps {
     className?: string;
 }
-export declare const CollapseButton: ({ className }: CollapseButtonProps) => React.JSX.Element;
+export declare const CollapseButton: ({ className }: CollapseButtonProps) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;

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

@@ -32,6 +32,10 @@ export interface AsideHeaderGeneralProps extends QAProps {
         compact: boolean;
         asideRef: React.RefObject<HTMLDivElement>;
     }) => React.ReactNode;
+    collapseButtonWrapper?: (defaultButton: React.ReactNode, data: {
+        compact: boolean;
+        onChangeCompact?: (compact: boolean) => void;
+    }) => React.ReactNode;
     editMenuProps?: EditMenuProps;
     onClosePanel?: () => void;
     onChangeCompact?: (compact: boolean) => void;

package/build/cjs/{index-ClUpN5oD.js → index-CCk1YYhe.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var uikit = require('@gravity-ui/uikit');
-var index = require('./index-CLs1L-sq.js');
+var index = require('./index-xx_lPj0v.js');
 require('@bem-react/classname');
 require('@gravity-ui/icons');
 require('@gravity-ui/uikit/i18n');
@@ -67,4 +67,4 @@ const TopAlert = ({ alert, className, mobileView = false }) => {
 };
 
 exports.TopAlert = TopAlert;
-//# sourceMappingURL=index-ClUpN5oD.js.map
+//# sourceMappingURL=index-CCk1YYhe.js.map

package/build/cjs/{index-ClUpN5oD.js.map → index-CCk1YYhe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-ClUpN5oD.js","sources":["../../../src/components/TopAlert/useTopAlertHeight.ts","../../../src/components/TopAlert/TopAlert.tsx"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\nimport {TopAlertProps} from '../types';\n\ntype TopAlertHeightControls = {\n    alertRef: React.RefObject<HTMLDivElement>;\n    updateTopSize: () => void;\n};\n\nconst G_ROOT_CLASS_NAME = 'g-root';\n\nexport const useTopAlertHeight = ({alert}: {alert?: TopAlertProps}): TopAlertHeightControls => {\n    const alertRef = React.useRef<HTMLDivElement>(null);\n\n    const setAsideTopPanelHeight = React.useCallback((clientHeight: number) => {\n        const gRootElement = document\n            .getElementsByClassName(G_ROOT_CLASS_NAME)\n            .item(0) as HTMLElement | null;\n        gRootElement?.style.setProperty('--gn-top-alert-height', clientHeight + 'px');\n    }, []);\n\n    const updateTopSize = React.useCallback(() => {\n        setAsideTopPanelHeight(alertRef.current?.clientHeight || 0);\n    }, [setAsideTopPanelHeight]);\n\n    React.useLayoutEffect(() => {\n        const updateTopSizeDebounce = debounceFn(updateTopSize, 200, {leading: true});\n\n        if (alert) {\n            window.addEventListener('resize', updateTopSizeDebounce);\n            updateTopSizeDebounce();\n        }\n        return () => {\n            window.removeEventListener('resize', updateTopSizeDebounce);\n            setAsideTopPanelHeight(0);\n        };\n    }, [alert, alertRef, updateTopSize, setAsideTopPanelHeight]);\n\n    return {\n        alertRef,\n        updateTopSize,\n    };\n};\n","import React from 'react';\n\nimport {Alert, Text} from '@gravity-ui/uikit';\n\nimport {TopAlertProps} from '../types';\nimport {block} from '../utils/cn';\n\nimport {useTopAlertHeight} from './useTopAlertHeight';\n\nimport './TopAlert.scss';\n\nconst b = block('top-alert');\n\ntype Props = {\n    alert?: TopAlertProps;\n    className?: string;\n    mobileView?: boolean;\n};\n\nexport const TopAlert = ({alert, className, mobileView = false}: Props) => {\n    const {alertRef, updateTopSize} = useTopAlertHeight({alert});\n\n    const [opened, setOpened] = React.useState(true);\n\n    const handleClose = React.useCallback(() => {\n        setOpened(false);\n        alert?.onCloseTopAlert?.();\n    }, [alert]);\n\n    React.useEffect(() => {\n        if (!opened) {\n            updateTopSize();\n        }\n    }, [opened, updateTopSize]);\n\n    if (!alert || !alert.message) {\n        return null;\n    }\n\n    return (\n        <div\n            ref={alertRef}\n            className={b('wrapper', {'with-bottom-border': !mobileView && opened}, className)}\n        >\n            {opened && (\n                <Alert\n                    className={b('', {\n                        centered: alert.centered,\n                        dense: alert.dense,\n                    })}\n                    corners=\"square\"\n                    layout=\"horizontal\"\n                    align={alert.align}\n                    theme={alert.theme || 'warning'}\n                    view={alert.view}\n                    icon={alert.icon}\n                    title={alert.title}\n                    message={\n                        mobileView ? (\n                            <Text ellipsisLines={5} variant=\"body-2\">\n                                {alert.message}\n                            </Text>\n                        ) : (\n                            alert.message\n                        )\n                    }\n                    actions={alert.actions}\n                    onClose={alert.closable ? handleClose : undefined}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["debounceFn","block","Alert","Text"],"mappings":"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"}
+{"version":3,"file":"index-CCk1YYhe.js","sources":["../../../src/components/TopAlert/useTopAlertHeight.ts","../../../src/components/TopAlert/TopAlert.tsx"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\nimport {TopAlertProps} from '../types';\n\ntype TopAlertHeightControls = {\n    alertRef: React.RefObject<HTMLDivElement>;\n    updateTopSize: () => void;\n};\n\nconst G_ROOT_CLASS_NAME = 'g-root';\n\nexport const useTopAlertHeight = ({alert}: {alert?: TopAlertProps}): TopAlertHeightControls => {\n    const alertRef = React.useRef<HTMLDivElement>(null);\n\n    const setAsideTopPanelHeight = React.useCallback((clientHeight: number) => {\n        const gRootElement = document\n            .getElementsByClassName(G_ROOT_CLASS_NAME)\n            .item(0) as HTMLElement | null;\n        gRootElement?.style.setProperty('--gn-top-alert-height', clientHeight + 'px');\n    }, []);\n\n    const updateTopSize = React.useCallback(() => {\n        setAsideTopPanelHeight(alertRef.current?.clientHeight || 0);\n    }, [setAsideTopPanelHeight]);\n\n    React.useLayoutEffect(() => {\n        const updateTopSizeDebounce = debounceFn(updateTopSize, 200, {leading: true});\n\n        if (alert) {\n            window.addEventListener('resize', updateTopSizeDebounce);\n            updateTopSizeDebounce();\n        }\n        return () => {\n            window.removeEventListener('resize', updateTopSizeDebounce);\n            setAsideTopPanelHeight(0);\n        };\n    }, [alert, alertRef, updateTopSize, setAsideTopPanelHeight]);\n\n    return {\n        alertRef,\n        updateTopSize,\n    };\n};\n","import React from 'react';\n\nimport {Alert, Text} from '@gravity-ui/uikit';\n\nimport {TopAlertProps} from '../types';\nimport {block} from '../utils/cn';\n\nimport {useTopAlertHeight} from './useTopAlertHeight';\n\nimport './TopAlert.scss';\n\nconst b = block('top-alert');\n\ntype Props = {\n    alert?: TopAlertProps;\n    className?: string;\n    mobileView?: boolean;\n};\n\nexport const TopAlert = ({alert, className, mobileView = false}: Props) => {\n    const {alertRef, updateTopSize} = useTopAlertHeight({alert});\n\n    const [opened, setOpened] = React.useState(true);\n\n    const handleClose = React.useCallback(() => {\n        setOpened(false);\n        alert?.onCloseTopAlert?.();\n    }, [alert]);\n\n    React.useEffect(() => {\n        if (!opened) {\n            updateTopSize();\n        }\n    }, [opened, updateTopSize]);\n\n    if (!alert || !alert.message) {\n        return null;\n    }\n\n    return (\n        <div\n            ref={alertRef}\n            className={b('wrapper', {'with-bottom-border': !mobileView && opened}, className)}\n        >\n            {opened && (\n                <Alert\n                    className={b('', {\n                        centered: alert.centered,\n                        dense: alert.dense,\n                    })}\n                    corners=\"square\"\n                    layout=\"horizontal\"\n                    align={alert.align}\n                    theme={alert.theme || 'warning'}\n                    view={alert.view}\n                    icon={alert.icon}\n                    title={alert.title}\n                    message={\n                        mobileView ? (\n                            <Text ellipsisLines={5} variant=\"body-2\">\n                                {alert.message}\n                            </Text>\n                        ) : (\n                            alert.message\n                        )\n                    }\n                    actions={alert.actions}\n                    onClose={alert.closable ? handleClose : undefined}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["debounceFn","block","Alert","Text"],"mappings":"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"}

package/build/cjs/{index-CLs1L-sq.js → index-xx_lPj0v.js}

@@ -141,7 +141,7 @@ function styleInject(css, ref) {
 var css_248z$u = ".g-root{--gn-aside-top-panel-height:0px}.gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.gn-aside-header__aside{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{inset:0;position:absolute;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.gn-aside-header__aside-content>.gn-aside-header-logo{margin:8px 0}.gn-aside-header__aside-content_with-decoration{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.gn-aside-header__aside-custom-background{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.gn-aside-header_compact .gn-aside-header__aside{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.gn-aside-header_compact .gn-aside-header__aside-content{background:transparent}.gn-aside-header__header{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.gn-aside-header__header .gn-aside-header__header-divider{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:\"\";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.gn-aside-header__header:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:\"\";height:1px;left:0;position:absolute;width:100%;z-index:-2}.gn-aside-header_compact .gn-aside-header__header:before,.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider{display:block}.gn-aside-header_compact .gn-aside-header__header_with-decoration:after{display:none}.gn-aside-header__logo-button .gn-aside-header__logo-icon-place{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.gn-aside-header__menu-items{flex-grow:1}.gn-aside-header__footer{display:flex;flex-direction:column;flex-shrink:0;margin:8px 0;width:100%}.gn-aside-header__panels{inset:var(--gn-top-alert-height,0) 0 0;max-height:calc(100vh - var(--gn-top-alert-height, 0));overflow:auto;position:fixed;z-index:var(--gn-aside-header-panel-z-index,98)}.gn-aside-header__panel{height:100%}.gn-aside-header__pane-container{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.gn-aside-header__top-alert{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.gn-aside-header__content{margin-top:var(--gn-top-alert-height,0);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}";
 styleInject(css_248z$u);
 
-const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-ClUpN5oD.js'); }).then((module) => ({ default: module.TopAlert })));
+const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-CCk1YYhe.js'); }).then((module) => ({ default: module.TopAlert })));
 const Layout = ({ compact, className, children, topAlert }) => {
     const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
     const asideHeaderContextValue = React.useMemo(() => ({ size, compact }), [compact, size]);
@@ -1898,15 +1898,19 @@ styleInject(css_248z$n);
 
 const b$o = block('collapse-button');
 const CollapseButton = ({ className }) => {
-    const { onChangeCompact, compact, expandTitle, collapseTitle } = useAsideHeaderInnerContext();
+    const { onChangeCompact, compact, expandTitle, collapseTitle, collapseButtonWrapper } = useAsideHeaderInnerContext();
     const onCollapseButtonClick = React.useCallback(() => {
         onChangeCompact === null || onChangeCompact === undefined ? undefined : onChangeCompact(!compact);
     }, [compact, onChangeCompact]);
     const buttonTitle = compact
         ? expandTitle || i18n$3('button_expand')
         : collapseTitle || i18n$3('button_collapse');
-    return (React.createElement("button", { className: b$o({ compact }, className), onClick: onCollapseButtonClick, title: buttonTitle },
+    const defaultButton = (React.createElement("button", { className: b$o({ compact }, className), onClick: onCollapseButtonClick, title: buttonTitle },
         React.createElement(uikit.Icon, { data: SvgControlMenuButton, className: b$o('icon'), width: "16", height: "10" })));
+    if (collapseButtonWrapper) {
+        return collapseButtonWrapper(defaultButton, { compact, onChangeCompact });
+    }
+    return defaultButton;
 };
 
 var css_248z$m = ".gn-logo{height:40px}.gn-logo,.gn-logo__btn-logo{align-items:center;display:flex}.gn-logo__btn-logo{cursor:pointer;flex-shrink:0;justify-content:center}.gn-logo__btn-logo,.gn-logo__btn-logo:active,.gn-logo__btn-logo:focus,.gn-logo__btn-logo:hover,.gn-logo__btn-logo:visited{color:inherit;outline:none;text-decoration:none}.gn-logo__btn-logo:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-logo__logo-icon-place{align-items:center;display:flex;justify-content:center;width:36px}";
@@ -5679,7 +5683,7 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
 var css_248z$4 = ".gn-mobile-header{--mobile-header-min-heigth:50px;--mobile-header-icon-size:20px;background-color:var(--g-color-base-background)}.gn-mobile-header__header-container{background-color:var(--g-color-base-background);position:sticky;top:0;z-index:var(--gn-mobile-header-z-index,100)}.gn-mobile-header__header{align-items:center;border-bottom:1px solid var(--g-color-line-generic);box-sizing:border-box;display:flex;justify-content:space-between;padding:0 10px}.gn-mobile-header__burger{padding:12px}.gn-mobile-header__panel-item{--gn-drawer-item-position:var(--gn-mobile-header-panel-position,absolute)}.gn-mobile-header__burger-menu,.gn-mobile-header__panel-item{background-color:var(--g-color-base-background);max-height:100%;max-width:90vw;width:320px}.gn-mobile-header__user-menu{overflow-y:auto}.gn-mobile-header__overlap-panel,.gn-mobile-header__panels{z-index:var(--gn-mobile-header-panel-z-index,98)}.gn-mobile-header__panels{inset:var(--mobile-header-min-heigth) 0 0;overflow:hidden;position:fixed}.gn-mobile-header__panel-item{top:unset}.gn-mobile-header__content{overflow:auto}";
 styleInject(css_248z$4);
 
-const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-ClUpN5oD.js'); }).then((module) => ({ default: module.TopAlert })));
+const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-CCk1YYhe.js'); }).then((module) => ({ default: module.TopAlert })));
 const b$4 = block('mobile-header');
 const MobileHeader = React.forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, contentClassName, overlapPanel, topAlert, }, ref) => {
     const targetRef = useForwardRef(ref);
@@ -5995,4 +5999,4 @@ exports.styleInject = styleInject;
 exports.useAsideHeaderContext = useAsideHeaderContext;
 exports.useSettingsContext = useSettingsContext;
 exports.useSettingsSelectionContext = useSettingsSelectionContext;
-//# sourceMappingURL=index-CLs1L-sq.js.map
+//# sourceMappingURL=index-xx_lPj0v.js.map