@gravity-ui/navigation 1.5.0 → 1.6.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.
Files changed (67) hide show
  1. package/build/cjs/AsideHeader.js +6 -7
  2. package/build/cjs/AsideHeader.js.map +1 -1
  3. package/build/cjs/{Content-64d5738a.js → Content-d521cb05.js} +7 -2
  4. package/build/cjs/Content-d521cb05.js.map +1 -0
  5. package/build/cjs/FirstPanel-2f78b962.js +902 -0
  6. package/build/cjs/FirstPanel-2f78b962.js.map +1 -0
  7. package/build/cjs/{FooterItem-01b32eb7.js → FooterItem-7a6150ef.js} +2 -2
  8. package/build/cjs/{FooterItem-01b32eb7.js.map → FooterItem-7a6150ef.js.map} +1 -1
  9. package/build/cjs/FooterItem.js +2 -3
  10. package/build/cjs/FooterItem.js.map +1 -1
  11. package/build/cjs/{Item-eaaec1a7.js → Item-15bdb320.js} +9 -3
  12. package/build/cjs/Item-15bdb320.js.map +1 -0
  13. package/build/cjs/PageLayout.js +83 -9
  14. package/build/cjs/PageLayout.js.map +1 -1
  15. package/build/cjs/PageLayoutAside.js +11 -892
  16. package/build/cjs/PageLayoutAside.js.map +1 -1
  17. package/build/cjs/components/AsideHeader/__stories__/AsideHeader.stories.d.ts +2 -0
  18. package/build/cjs/components/AsideHeader/__stories__/AsideHeaderShowcase.d.ts +4 -2
  19. package/build/cjs/components/AsideHeader/components/PageLayout/PageLayout.d.ts +1 -1
  20. package/build/cjs/components/AsideHeader/components/TopPanel.d.ts +7 -0
  21. package/build/cjs/components/AsideHeader/components/index.d.ts +1 -0
  22. package/build/cjs/components/AsideHeader/types.d.ts +3 -1
  23. package/build/cjs/components/AsideHeader/useAsideHeaderTopPanel.d.ts +10 -0
  24. package/build/cjs/components/types.d.ts +13 -1
  25. package/build/cjs/index.js +4 -5
  26. package/build/cjs/index.js.map +1 -1
  27. package/build/cjs/index6.js +2 -2
  28. package/build/esm/AsideHeader.js +6 -7
  29. package/build/esm/AsideHeader.js.map +1 -1
  30. package/build/esm/{Content-f94ba85d.js → Content-a1895799.js} +7 -2
  31. package/build/esm/Content-a1895799.js.map +1 -0
  32. package/build/esm/FirstPanel-bafddc24.js +875 -0
  33. package/build/esm/FirstPanel-bafddc24.js.map +1 -0
  34. package/build/esm/{FooterItem-d66ab545.js → FooterItem-b85e6310.js} +2 -2
  35. package/build/esm/{FooterItem-d66ab545.js.map → FooterItem-b85e6310.js.map} +1 -1
  36. package/build/esm/FooterItem.js +1 -2
  37. package/build/esm/FooterItem.js.map +1 -1
  38. package/build/esm/{Item-57b00fa0.js → Item-f02541c1.js} +6 -3
  39. package/build/esm/Item-f02541c1.js.map +1 -0
  40. package/build/esm/PageLayout.js +79 -5
  41. package/build/esm/PageLayout.js.map +1 -1
  42. package/build/esm/PageLayoutAside.js +10 -873
  43. package/build/esm/PageLayoutAside.js.map +1 -1
  44. package/build/esm/components/AsideHeader/__stories__/AsideHeader.stories.d.ts +2 -0
  45. package/build/esm/components/AsideHeader/__stories__/AsideHeaderShowcase.d.ts +4 -2
  46. package/build/esm/components/AsideHeader/components/PageLayout/PageLayout.d.ts +1 -1
  47. package/build/esm/components/AsideHeader/components/TopPanel.d.ts +7 -0
  48. package/build/esm/components/AsideHeader/components/index.d.ts +1 -0
  49. package/build/esm/components/AsideHeader/types.d.ts +3 -1
  50. package/build/esm/components/AsideHeader/useAsideHeaderTopPanel.d.ts +10 -0
  51. package/build/esm/components/types.d.ts +13 -1
  52. package/build/esm/index.js +4 -5
  53. package/build/esm/index.js.map +1 -1
  54. package/build/esm/index6.js +2 -2
  55. package/package.json +1 -1
  56. package/build/cjs/Content-64d5738a.js.map +0 -1
  57. package/build/cjs/Item-eaaec1a7.js.map +0 -1
  58. package/build/cjs/constants-9783dc2d.js +0 -10
  59. package/build/cjs/constants-9783dc2d.js.map +0 -1
  60. package/build/cjs/utils-e82025ce.js +0 -8
  61. package/build/cjs/utils-e82025ce.js.map +0 -1
  62. package/build/esm/Content-f94ba85d.js.map +0 -1
  63. package/build/esm/Item-57b00fa0.js.map +0 -1
  64. package/build/esm/constants-b3a73cd1.js +0 -6
  65. package/build/esm/constants-b3a73cd1.js.map +0 -1
  66. package/build/esm/utils-cc9b1968.js +0 -6
  67. package/build/esm/utils-cc9b1968.js.map +0 -1
@@ -1,19 +1,93 @@
1
1
  import React__default, { useMemo } from 'react';
2
2
  import { AsideHeaderContextProvider, useAsideHeaderContext } from './AsideHeaderContext.js';
3
- import { C as Content } from './Content-f94ba85d.js';
4
- import { a as ASIDE_HEADER_COMPACT_WIDTH, b as ASIDE_HEADER_EXPANDED_WIDTH } from './constants-b3a73cd1.js';
5
- import { b } from './utils-cc9b1968.js';
3
+ import { C as Content } from './Content-a1895799.js';
4
+ import { b } from './FirstPanel-bafddc24.js';
5
+ import { Alert } from '@gravity-ui/uikit';
6
+ import { d as debounce_1 } from './debounce-64cd2b4c.js';
7
+ import { a as ASIDE_HEADER_COMPACT_WIDTH, b as ASIDE_HEADER_EXPANDED_WIDTH } from './Item-f02541c1.js';
6
8
  import { s as styleInject } from './style-inject.es-cfd97593.js';
9
+ import '@gravity-ui/icons';
10
+ import './registerKeyset-35f1ea08.js';
11
+ import './Drawer.js';
12
+ import 'react-dom';
7
13
  import '@bem-react/classname';
8
14
 
9
- var css_248z = ".g-root{--gn-aside-header-background-color:var(--g-color-base-warning-light);--gn-aside-header-collapse-button-divider-line-color:var(\n --gn-aside-header-subheader-divider-line-color\n );--gn-aside-header-footer-item-icon-color:var(--g-color-text-primary);--gn-aside-header-subheader-item-icon-color:var(--g-color-text-primary);--gn-aside-header-item-icon-background-size:38px}.g-root_theme_light,.g-root_theme_light-hc{--gn-aside-header-divider-line-color:var(--g-color-line-generic);--gn-aside-header-subheader-divider-line-color:var(--g-color-line-generic)}.g-root_theme_dark,.g-root_theme_dark-hc{--gn-aside-header-divider-line-color:var(--g-color-line-generic-solid);--gn-aside-header-subheader-divider-line-color:var(--g-color-line-generic-solid)}.gn-aside-header{--gn-aside-header-min-width:56px;height:100%;position:relative;width:100%}.gn-aside-header,.gn-aside-header__aside{background-color:var(--g-color-base-background)}.gn-aside-header__aside{box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;position:sticky;top:0;width:inherit;z-index:100}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-line-color);content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;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-background-color) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.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-background-color);display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-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-subheader-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__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{bottom:0;left:0;overflow:auto;position:fixed;right:0;top:0;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_reverse .gn-aside-header__pane-container{flex-direction:row-reverse}.gn-aside-header__content{width:calc(100% - var(--gn-aside-header-size));z-index:95}.gn-aside-header__collapse-button{--yc-button-background-color-hover:transparent;border-top:1px solid var(--gn-aside-header-collapse-button-divider-line-color);box-sizing:border-box;flex:none;height:20px;margin-top:auto;overflow:hidden;width:100%}.gn-aside-header__collapse-button>.yc-button__text{align-items:center;display:flex;height:20px;justify-content:center}.gn-aside-header__collapse-button:not(.gn-aside-header__collapse-button_compact) .gn-aside-header__collapse-icon{transform:rotate(180deg)}.gn-aside-header__collapse-button .gn-aside-header__collapse-icon{color:var(--g-color-text-secondary)}.gn-aside-header__collapse-button:hover .gn-aside-header__collapse-icon{color:var(--g-color-text-primary)}";
15
+ const G_ROOT_CLASS_NAME = 'g-root';
16
+ const useRefHeight = (ref) => {
17
+ const [topHeight, setTopHeight] = React__default.useState(0);
18
+ React__default.useEffect(() => {
19
+ if (ref.current) {
20
+ const { current } = ref;
21
+ setTopHeight(current.clientHeight);
22
+ }
23
+ }, [ref]);
24
+ return topHeight;
25
+ };
26
+ const useAsideHeaderTopPanel = ({ topAlert, }) => {
27
+ const topRef = React__default.useRef(null);
28
+ const topHeight = useRefHeight(topRef);
29
+ const setAsideTopPanelHeight = React__default.useCallback((clientHeight) => {
30
+ const gRootElement = document
31
+ .getElementsByClassName(G_ROOT_CLASS_NAME)
32
+ .item(0);
33
+ gRootElement === null || gRootElement === void 0 ? void 0 : gRootElement.style.setProperty('--gn-aside-top-panel-height', clientHeight + 'px');
34
+ }, []);
35
+ const updateTopSize = React__default.useCallback(() => {
36
+ var _a;
37
+ if (topRef.current) {
38
+ setAsideTopPanelHeight(((_a = topRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0);
39
+ }
40
+ }, [topRef, setAsideTopPanelHeight]);
41
+ React__default.useLayoutEffect(() => {
42
+ const updateTopSizeDebounce = debounce_1(updateTopSize, 200, { leading: true });
43
+ if (topAlert) {
44
+ window.addEventListener('resize', updateTopSizeDebounce);
45
+ updateTopSizeDebounce();
46
+ }
47
+ return () => {
48
+ window.removeEventListener('resize', updateTopSizeDebounce);
49
+ setAsideTopPanelHeight(0);
50
+ };
51
+ }, [topAlert, topHeight, topRef, updateTopSize]);
52
+ return {
53
+ topRef,
54
+ updateTopSize,
55
+ };
56
+ };
57
+
58
+ const TopPanel = ({ topAlert }) => {
59
+ const { topRef, updateTopSize } = useAsideHeaderTopPanel({ topAlert });
60
+ const [opened, setOpened] = React__default.useState(true);
61
+ const handleClose = React__default.useCallback(() => {
62
+ var _a;
63
+ setOpened(false);
64
+ (_a = topAlert === null || topAlert === void 0 ? void 0 : topAlert.onCloseTopAlert) === null || _a === void 0 ? void 0 : _a.call(topAlert);
65
+ }, [topAlert]);
66
+ React__default.useEffect(() => {
67
+ if (!opened) {
68
+ updateTopSize();
69
+ }
70
+ }, [opened, updateTopSize]);
71
+ if (!topAlert || !topAlert.message) {
72
+ return null;
73
+ }
74
+ return (React__default.createElement("div", { ref: topRef, className: b('pane-top', { opened }) }, opened && (React__default.createElement(React__default.Fragment, null,
75
+ React__default.createElement(Alert, { className: b('pane-top-alert', {
76
+ centered: topAlert.centered,
77
+ dense: topAlert.dense,
78
+ }), corners: "square", layout: "horizontal", theme: topAlert.theme || 'warning', icon: topAlert.icon, title: topAlert.title, message: topAlert.message, actions: topAlert.actions, onClose: topAlert.closable ? handleClose : undefined }),
79
+ React__default.createElement("div", { className: b('pane-top-divider') })))));
80
+ };
81
+
82
+ var css_248z = ".g-root{--gn-aside-header-background-color:var(--g-color-base-warning-light);--gn-aside-header-collapse-button-divider-line-color:var(\n --gn-aside-header-subheader-divider-line-color\n );--gn-aside-header-footer-item-icon-color:var(--g-color-text-primary);--gn-aside-header-subheader-item-icon-color:var(--g-color-text-primary);--gn-aside-header-item-icon-background-size:38px;--gn-aside-top-panel-height:0px}.g-root_theme_light,.g-root_theme_light-hc{--gn-aside-header-divider-line-color:var(--g-color-line-generic);--gn-aside-header-subheader-divider-line-color:var(--g-color-line-generic)}.g-root_theme_dark,.g-root_theme_dark-hc{--gn-aside-header-divider-line-color:var(--g-color-line-generic-solid);--gn-aside-header-subheader-divider-line-color:var(--g-color-line-generic-solid)}.gn-aside-header{--gn-aside-header-min-width:56px;height:100%;position:relative;width:100%}.gn-aside-header,.gn-aside-header__aside{background-color:var(--g-color-base-background)}.gn-aside-header__aside{box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;max-height:calc(100vh - var(--gn-aside-top-panel-height));position:sticky;top:0;width:inherit;z-index:100}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-line-color);content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;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-background-color) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.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-background-color);display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-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-subheader-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__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{bottom:0;left:0;max-height:calc(100vh - var(--gn-aside-top-panel-height));overflow:auto;position:fixed;right:0;top:var(--gn-aside-top-panel-height);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__pane-top-divider{background-color:var(--gn-aside-header-collapse-button-divider-line-color);height:1px;margin-top:-1px}.gn-aside-header__pane-top-alert_centered{display:flex;justify-content:space-around}.gn-aside-header__pane-top-alert_dense{padding-bottom:var(--g-spacing-2);padding-top:var(--g-spacing-2)}.gn-aside-header_reverse .gn-aside-header__pane-container{flex-direction:row-reverse}.gn-aside-header__content{width:calc(100% - var(--gn-aside-header-size));z-index:95}.gn-aside-header__collapse-button{--yc-button-background-color-hover:transparent;border-top:1px solid var(--gn-aside-header-collapse-button-divider-line-color);box-sizing:border-box;flex:none;height:20px;margin-top:auto;overflow:hidden;width:100%}.gn-aside-header__collapse-button>.yc-button__text{align-items:center;display:flex;height:20px;justify-content:center}.gn-aside-header__collapse-button:not(.gn-aside-header__collapse-button_compact) .gn-aside-header__collapse-icon{transform:rotate(180deg)}.gn-aside-header__collapse-button .gn-aside-header__collapse-icon{color:var(--g-color-text-secondary)}.gn-aside-header__collapse-button:hover .gn-aside-header__collapse-icon{color:var(--g-color-text-primary)}";
10
83
  styleInject(css_248z);
11
84
 
12
- const Layout = ({ compact, reverse, className, children }) => {
85
+ const Layout = ({ compact, reverse, className, children, topAlert }) => {
13
86
  const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
14
87
  const asideHeaderContextValue = useMemo(() => ({ size, compact }), [compact, size]);
15
88
  return (React__default.createElement(AsideHeaderContextProvider, { value: asideHeaderContextValue },
16
89
  React__default.createElement("div", { className: b({ compact, reverse }, className), style: Object.assign({}, { '--gn-aside-header-size': `${size}px` }) },
90
+ topAlert && React__default.createElement(TopPanel, { topAlert: topAlert }),
17
91
  React__default.createElement("div", { className: b('pane-container') }, children))));
18
92
  };
19
93
  const ConnectedContent = ({ children, renderContent, }) => {
@@ -1 +1 @@
1
- {"version":3,"file":"PageLayout.js","sources":["../../../src/components/AsideHeader/components/PageLayout/PageLayout.tsx"],"sourcesContent":["import React, {PropsWithChildren, useMemo} from 'react';\nimport {AsideHeaderContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {Content, ContentProps} from '../../../Content';\nimport {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../../../constants';\nimport {LayoutProps} from '../../types';\nimport {b} from '../../utils';\n\nimport '../../AsideHeader.scss';\n\nexport interface PageLayoutProps extends PropsWithChildren<LayoutProps> {\n reverse?: boolean;\n}\n\nconst Layout = ({compact, reverse, className, children}: PageLayoutProps) => {\n const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;\n const asideHeaderContextValue = useMemo(() => ({size, compact}), [compact, size]);\n\n return (\n <AsideHeaderContextProvider value={asideHeaderContextValue}>\n <div\n className={b({compact, reverse}, className)}\n style={{\n ...({'--gn-aside-header-size': `${size}px`} as React.CSSProperties),\n }}\n >\n <div className={b('pane-container')}>{children}</div>\n </div>\n </AsideHeaderContextProvider>\n );\n};\n\nconst ConnectedContent: React.FC<PropsWithChildren<Pick<ContentProps, 'renderContent'>>> = ({\n children,\n renderContent,\n}) => {\n const {size} = useAsideHeaderContext();\n\n return (\n <Content size={size} className={b('content')} renderContent={renderContent}>\n {children}\n </Content>\n );\n};\n\nconst PageLayout = Object.assign(Layout, {\n Content: ConnectedContent,\n});\n\nexport {PageLayout};\n"],"names":["React"],"mappings":";;;;;;;;;;;AAaA,MAAM,MAAM,GAAG,CAAC,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAkB,KAAI;IACxE,MAAM,IAAI,GAAG,OAAO,GAAG,0BAA0B,GAAG,2BAA2B,CAAC;IAChF,MAAM,uBAAuB,GAAG,OAAO,CAAC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;AAElF,IAAA,QACIA,cAAC,CAAA,aAAA,CAAA,0BAA0B,EAAC,EAAA,KAAK,EAAE,uBAAuB,EAAA;QACtDA,cACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,OAAO,EAAC,EAAE,SAAS,CAAC,EAC3C,KAAK,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAC,wBAAwB,EAAE,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI,EAAyB,CAAA,EAAA;AAGvE,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAAG,EAAA,QAAQ,CAAO,CACnD,CACmB,EAC/B;AACN,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAqE,CAAC,EACxF,QAAQ,EACR,aAAa,GAChB,KAAI;AACD,IAAA,MAAM,EAAC,IAAI,EAAC,GAAG,qBAAqB,EAAE,CAAC;IAEvC,QACIA,6BAAC,OAAO,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,aAAa,EACrE,EAAA,QAAQ,CACH,EACZ;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;AACrC,IAAA,OAAO,EAAE,gBAAgB;AAC5B,CAAA;;;;"}
1
+ {"version":3,"file":"PageLayout.js","sources":["../../../src/components/AsideHeader/useAsideHeaderTopPanel.tsx","../../../src/components/AsideHeader/components/TopPanel.tsx","../../../src/components/AsideHeader/components/PageLayout/PageLayout.tsx"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\nimport {AsideHeaderTopAlertProps} from '../types';\n\ntype AsideHeaderTopPanel = {\n topRef: React.RefObject<HTMLDivElement>;\n updateTopSize: () => void;\n};\n\nconst G_ROOT_CLASS_NAME = 'g-root';\n\nconst useRefHeight = (ref: React.RefObject<HTMLDivElement>) => {\n const [topHeight, setTopHeight] = React.useState(0);\n React.useEffect(() => {\n if (ref.current) {\n const {current} = ref;\n setTopHeight(current.clientHeight);\n }\n }, [ref]);\n return topHeight;\n};\n\nexport const useAsideHeaderTopPanel = ({\n topAlert,\n}: {\n topAlert?: AsideHeaderTopAlertProps;\n}): AsideHeaderTopPanel => {\n const topRef = React.useRef<HTMLDivElement>(null);\n const topHeight = useRefHeight(topRef);\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-aside-top-panel-height', clientHeight + 'px');\n }, []);\n\n const updateTopSize = React.useCallback(() => {\n if (topRef.current) {\n setAsideTopPanelHeight(topRef.current?.clientHeight || 0);\n }\n }, [topRef, setAsideTopPanelHeight]);\n\n React.useLayoutEffect(() => {\n const updateTopSizeDebounce = debounceFn(updateTopSize, 200, {leading: true});\n\n if (topAlert) {\n window.addEventListener('resize', updateTopSizeDebounce);\n updateTopSizeDebounce();\n }\n return () => {\n window.removeEventListener('resize', updateTopSizeDebounce);\n setAsideTopPanelHeight(0);\n };\n }, [topAlert, topHeight, topRef, updateTopSize]);\n\n return {\n topRef,\n updateTopSize,\n };\n};\n","import React from 'react';\nimport {Alert} from '@gravity-ui/uikit';\n\nimport {b} from '../utils';\nimport {AsideHeaderTopAlertProps} from '../../types';\nimport {useAsideHeaderTopPanel} from '../useAsideHeaderTopPanel';\n\ntype Props = {\n topAlert?: AsideHeaderTopAlertProps;\n};\n\nexport const TopPanel = ({topAlert}: Props) => {\n const {topRef, updateTopSize} = useAsideHeaderTopPanel({topAlert});\n\n const [opened, setOpened] = React.useState(true);\n\n const handleClose = React.useCallback(() => {\n setOpened(false);\n topAlert?.onCloseTopAlert?.();\n }, [topAlert]);\n\n React.useEffect(() => {\n if (!opened) {\n updateTopSize();\n }\n }, [opened, updateTopSize]);\n\n if (!topAlert || !topAlert.message) {\n return null;\n }\n\n return (\n <div ref={topRef} className={b('pane-top', {opened})}>\n {opened && (\n <React.Fragment>\n <Alert\n className={b('pane-top-alert', {\n centered: topAlert.centered,\n dense: topAlert.dense,\n })}\n corners=\"square\"\n layout=\"horizontal\"\n theme={topAlert.theme || 'warning'}\n icon={topAlert.icon}\n title={topAlert.title}\n message={topAlert.message}\n actions={topAlert.actions}\n onClose={topAlert.closable ? handleClose : undefined}\n />\n <div className={b('pane-top-divider')}></div>\n </React.Fragment>\n )}\n </div>\n );\n};\n","import React, {PropsWithChildren, useMemo} from 'react';\nimport {AsideHeaderContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {Content, ContentProps} from '../../../Content';\nimport {TopPanel} from '..';\nimport {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../../../constants';\nimport {LayoutProps} from '../../types';\nimport {b} from '../../utils';\n\nimport '../../AsideHeader.scss';\n\nexport interface PageLayoutProps extends PropsWithChildren<LayoutProps> {\n reverse?: boolean;\n}\n\nconst Layout = ({compact, reverse, className, children, topAlert}: PageLayoutProps) => {\n const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;\n const asideHeaderContextValue = useMemo(() => ({size, compact}), [compact, size]);\n\n return (\n <AsideHeaderContextProvider value={asideHeaderContextValue}>\n <div\n className={b({compact, reverse}, className)}\n style={{\n ...({'--gn-aside-header-size': `${size}px`} as React.CSSProperties),\n }}\n >\n {topAlert && <TopPanel topAlert={topAlert} />}\n <div className={b('pane-container')}>{children}</div>\n </div>\n </AsideHeaderContextProvider>\n );\n};\n\nconst ConnectedContent: React.FC<PropsWithChildren<Pick<ContentProps, 'renderContent'>>> = ({\n children,\n renderContent,\n}) => {\n const {size} = useAsideHeaderContext();\n\n return (\n <Content size={size} className={b('content')} renderContent={renderContent}>\n {children}\n </Content>\n );\n};\n\nconst PageLayout = Object.assign(Layout, {\n Content: ConnectedContent,\n});\n\nexport {PageLayout};\n"],"names":["React","debounceFn"],"mappings":"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"}