@gravity-ui/navigation 2.21.0 → 2.21.1

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 (9) hide show
  1. package/build/cjs/PageLayout.js +1 -1
  2. package/build/cjs/{TopPanel-1b062791.js → TopPanel-33f1e6c1.js} +2 -2
  3. package/build/cjs/TopPanel-33f1e6c1.js.map +1 -0
  4. package/build/esm/PageLayout.js +1 -1
  5. package/build/esm/{TopPanel-2760cf72.js → TopPanel-627d614f.js} +2 -2
  6. package/build/esm/TopPanel-627d614f.js.map +1 -0
  7. package/package.json +1 -1
  8. package/build/cjs/TopPanel-1b062791.js.map +0 -1
  9. package/build/esm/TopPanel-2760cf72.js.map +0 -1
package/build/cjs/PageLayout.js CHANGED
@@ -18,7 +18,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
18
  var css_248z = ".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-aside-top-panel-height);max-height:calc(100vh - var(--gn-aside-top-panel-height));position:sticky;top:var(--gn-aside-top-panel-height);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;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-wrapper{width:var(--gn-aside-header-min-width)}.gn-aside-header__logo-button[class],.gn-aside-header__logo-button[class] .g-button__icon{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size))}.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-aside-top-panel-height) 0 0;max-height:calc(100vh - var(--gn-aside-top-panel-height));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__pane-top-divider{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));height:1px;margin-top:-1px}.gn-aside-header__pane-top{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__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__content{margin-top:var(--gn-aside-top-panel-height);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}";
19
19
  styleInject_es.styleInject(css_248z);
20
20
 
21
- const TopPanel = React__default["default"].lazy(() => Promise.resolve().then(function () { return require('./TopPanel-1b062791.js'); }).then((module) => ({ default: module.TopPanel })));
21
+ const TopPanel = React__default["default"].lazy(() => Promise.resolve().then(function () { return require('./TopPanel-33f1e6c1.js'); }).then((module) => ({ default: module.TopPanel })));
22
22
  const Layout = ({ compact, className, children, topAlert }) => {
23
23
  const size = compact ? constants.ASIDE_HEADER_COMPACT_WIDTH : constants.ASIDE_HEADER_EXPANDED_WIDTH;
24
24
  const asideHeaderContextValue = React.useMemo(() => ({ size, compact }), [compact, size]);
package/build/cjs/{TopPanel-1b062791.js → TopPanel-33f1e6c1.js} RENAMED
@@ -74,9 +74,9 @@ const TopPanel = ({ topAlert }) => {
74
74
  React__default["default"].createElement(uikit.Alert, { className: utils.b('pane-top-alert', {
75
75
  centered: topAlert.centered,
76
76
  dense: topAlert.dense,
77
- }), 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 }),
77
+ }), corners: "square", layout: "horizontal", theme: topAlert.theme || 'warning', view: topAlert.view, icon: topAlert.icon, title: topAlert.title, message: topAlert.message, actions: topAlert.actions, onClose: topAlert.closable ? handleClose : undefined }),
78
78
  React__default["default"].createElement("div", { className: utils.b('pane-top-divider') })))));
79
79
  };
80
80
 
81
81
  exports.TopPanel = TopPanel;
82
- //# sourceMappingURL=TopPanel-1b062791.js.map
82
+ //# sourceMappingURL=TopPanel-33f1e6c1.js.map
package/build/cjs/TopPanel-33f1e6c1.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TopPanel-33f1e6c1.js","sources":["../../../src/components/AsideHeader/useAsideHeaderTopPanel.tsx","../../../src/components/AsideHeader/components/TopPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\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, setAsideTopPanelHeight]);\n\n return {\n topRef,\n updateTopSize,\n };\n};\n","import React from 'react';\n\nimport {Alert} from '@gravity-ui/uikit';\n\nimport {AsideHeaderTopAlertProps} from '../../types';\nimport {useAsideHeaderTopPanel} from '../useAsideHeaderTopPanel';\nimport {b} from '../utils';\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 view={topAlert.view}\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"],"names":["React","debounceFn","b","Alert"],"mappings":"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"}
package/build/esm/PageLayout.js CHANGED
@@ -10,7 +10,7 @@ import '@bem-react/classname';
10
10
  var css_248z = ".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-aside-top-panel-height);max-height:calc(100vh - var(--gn-aside-top-panel-height));position:sticky;top:var(--gn-aside-top-panel-height);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;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-wrapper{width:var(--gn-aside-header-min-width)}.gn-aside-header__logo-button[class],.gn-aside-header__logo-button[class] .g-button__icon{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size))}.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-aside-top-panel-height) 0 0;max-height:calc(100vh - var(--gn-aside-top-panel-height));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__pane-top-divider{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));height:1px;margin-top:-1px}.gn-aside-header__pane-top{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__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__content{margin-top:var(--gn-aside-top-panel-height);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}";
11
11
  styleInject(css_248z);
12
12
 
13
- const TopPanel = React__default.lazy(() => import('./TopPanel-2760cf72.js').then((module) => ({ default: module.TopPanel })));
13
+ const TopPanel = React__default.lazy(() => import('./TopPanel-627d614f.js').then((module) => ({ default: module.TopPanel })));
14
14
  const Layout = ({ compact, className, children, topAlert }) => {
15
15
  const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
16
16
  const asideHeaderContextValue = useMemo(() => ({ size, compact }), [compact, size]);
package/build/esm/{TopPanel-2760cf72.js → TopPanel-627d614f.js} RENAMED
@@ -68,9 +68,9 @@ const TopPanel = ({ topAlert }) => {
68
68
  React__default.createElement(Alert, { className: b('pane-top-alert', {
69
69
  centered: topAlert.centered,
70
70
  dense: topAlert.dense,
71
- }), 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 }),
71
+ }), corners: "square", layout: "horizontal", theme: topAlert.theme || 'warning', view: topAlert.view, icon: topAlert.icon, title: topAlert.title, message: topAlert.message, actions: topAlert.actions, onClose: topAlert.closable ? handleClose : undefined }),
72
72
  React__default.createElement("div", { className: b('pane-top-divider') })))));
73
73
  };
74
74
 
75
75
  export { TopPanel };
76
- //# sourceMappingURL=TopPanel-2760cf72.js.map
76
+ //# sourceMappingURL=TopPanel-627d614f.js.map
package/build/esm/TopPanel-627d614f.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TopPanel-627d614f.js","sources":["../../../src/components/AsideHeader/useAsideHeaderTopPanel.tsx","../../../src/components/AsideHeader/components/TopPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\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, setAsideTopPanelHeight]);\n\n return {\n topRef,\n updateTopSize,\n };\n};\n","import React from 'react';\n\nimport {Alert} from '@gravity-ui/uikit';\n\nimport {AsideHeaderTopAlertProps} from '../../types';\nimport {useAsideHeaderTopPanel} from '../useAsideHeaderTopPanel';\nimport {b} from '../utils';\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 view={topAlert.view}\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"],"names":["React","debounceFn"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/navigation",
3
- "version": "2.21.0",
3
+ "version": "2.21.1",
4
4
  "description": "Gravity UI Navigation components",
5
5
  "license": "MIT",
6
6
  "repository": {
package/build/cjs/TopPanel-1b062791.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"TopPanel-1b062791.js","sources":["../../../src/components/AsideHeader/useAsideHeaderTopPanel.tsx","../../../src/components/AsideHeader/components/TopPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\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, setAsideTopPanelHeight]);\n\n return {\n topRef,\n updateTopSize,\n };\n};\n","import React from 'react';\n\nimport {Alert} from '@gravity-ui/uikit';\n\nimport {AsideHeaderTopAlertProps} from '../../types';\nimport {useAsideHeaderTopPanel} from '../useAsideHeaderTopPanel';\nimport {b} from '../utils';\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"],"names":["React","debounceFn","b","Alert"],"mappings":"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"}
package/build/esm/TopPanel-2760cf72.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"TopPanel-2760cf72.js","sources":["../../../src/components/AsideHeader/useAsideHeaderTopPanel.tsx","../../../src/components/AsideHeader/components/TopPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\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, setAsideTopPanelHeight]);\n\n return {\n topRef,\n updateTopSize,\n };\n};\n","import React from 'react';\n\nimport {Alert} from '@gravity-ui/uikit';\n\nimport {AsideHeaderTopAlertProps} from '../../types';\nimport {useAsideHeaderTopPanel} from '../useAsideHeaderTopPanel';\nimport {b} from '../utils';\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"],"names":["React","debounceFn"],"mappings":"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"}