@gravity-ui/navigation 3.3.9 → 3.4.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.
- package/build/cjs/components/Drawer/Drawer.d.ts +10 -2
- package/build/cjs/components/Drawer/__stories__/Drawer.stories.d.ts +1 -0
- package/build/cjs/components/Drawer/__stories__/ScrollLock.d.ts +3 -0
- package/build/cjs/components/Drawer/utils.d.ts +1 -0
- package/build/cjs/{index-wmJ_X61I.js → index-CLs1L-sq.js} +59 -25
- package/build/{esm/index-DFIDnNIV.js.map → cjs/index-CLs1L-sq.js.map} +1 -1
- package/build/cjs/{index-C751PFJy.js → index-ClUpN5oD.js} +2 -2
- package/build/cjs/{index-C751PFJy.js.map → index-ClUpN5oD.js.map} +1 -1
- package/build/cjs/index.js +1 -1
- package/build/esm/components/Drawer/Drawer.d.ts +10 -2
- package/build/esm/components/Drawer/__stories__/Drawer.stories.d.ts +1 -0
- package/build/esm/components/Drawer/__stories__/ScrollLock.d.ts +3 -0
- package/build/esm/components/Drawer/utils.d.ts +1 -0
- package/build/esm/{index-De4-cL6-.js → index-AHJjBN3a.js} +2 -2
- package/build/esm/{index-De4-cL6-.js.map → index-AHJjBN3a.js.map} +1 -1
- package/build/esm/{index-DFIDnNIV.js → index-CoM0LT-x.js} +59 -25
- package/build/{cjs/index-wmJ_X61I.js.map → esm/index-CoM0LT-x.js.map} +1 -1
- package/build/esm/index.js +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var uikit = require('@gravity-ui/uikit');
|
|
5
|
-
var index = require('./index-
|
|
5
|
+
var index = require('./index-CLs1L-sq.js');
|
|
6
6
|
require('@bem-react/classname');
|
|
7
7
|
require('@gravity-ui/icons');
|
|
8
8
|
require('@gravity-ui/uikit/i18n');
|
|
@@ -67,4 +67,4 @@ const TopAlert = ({ alert, className, mobileView = false }) => {
|
|
|
67
67
|
};
|
|
68
68
|
|
|
69
69
|
exports.TopAlert = TopAlert;
|
|
70
|
-
//# sourceMappingURL=index-
|
|
70
|
+
//# sourceMappingURL=index-ClUpN5oD.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
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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"}
|
package/build/cjs/index.js
CHANGED
|
@@ -49,6 +49,8 @@ export interface DrawerItemProps {
|
|
|
49
49
|
* @default false
|
|
50
50
|
* */
|
|
51
51
|
keepMounted?: boolean;
|
|
52
|
+
/** Optional inline styles to be applied to the DrawerItem component. */
|
|
53
|
+
style?: React.CSSProperties;
|
|
52
54
|
}
|
|
53
55
|
export declare const DrawerItem: React.ForwardRefExoticComponent<DrawerItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
54
56
|
type DrawerChild = React.ReactElement<DrawerItemProps>;
|
|
@@ -63,17 +65,23 @@ export interface DrawerProps {
|
|
|
63
65
|
veilClassName?: string;
|
|
64
66
|
/** Optional callback function that is called when the veil (overlay) is clicked. */
|
|
65
67
|
onVeilClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
|
66
|
-
/** Optional callback function that is called when the escape key is pressed
|
|
68
|
+
/** Optional callback function that is called when the escape key is pressed if the drawer is open. */
|
|
67
69
|
onEscape?: (event: KeyboardEvent) => void;
|
|
68
70
|
/** Optional flag to hide the background darkening */
|
|
69
71
|
hideVeil?: boolean;
|
|
70
|
-
/** Optional flag to
|
|
72
|
+
/** Optional flag to doesn't use `Portal` for drawer */
|
|
71
73
|
disablePortal?: boolean;
|
|
72
74
|
/**
|
|
73
75
|
* Keep child components mounted when closed
|
|
74
76
|
* @default false
|
|
75
77
|
* */
|
|
76
78
|
keepMounted?: boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Whether to lock page scroll when drawer is open.
|
|
81
|
+
* Applied only when hideVeil=true and disablePortal=false.
|
|
82
|
+
* @default false
|
|
83
|
+
*/
|
|
84
|
+
scrollLock?: boolean;
|
|
77
85
|
}
|
|
78
86
|
export declare const Drawer: React.FC<DrawerProps>;
|
|
79
87
|
export {};
|
|
@@ -5,4 +5,5 @@ export declare const Showcase: import("@storybook/csf").AnnotatedStoryFn<import(
|
|
|
5
5
|
export declare const ResizableItem: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
|
|
6
6
|
export declare const DisablePortal: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
|
|
7
7
|
export declare const HideVeil: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
|
|
8
|
+
export declare const ScrollLock: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
|
|
8
9
|
export declare const UsePortal: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
|
|
@@ -5,6 +5,7 @@ export declare const DRAWER_ITEM_INITIAL_RESIZE_WIDTH = 400;
|
|
|
5
5
|
export type DrawerDirection = 'right' | 'left' | 'top' | 'bottom';
|
|
6
6
|
export type OnResizeHandler = (width: number, event: MouseEvent | TouchEvent) => void;
|
|
7
7
|
export type OnResizeContinueHandler = (width: number) => void;
|
|
8
|
+
export declare function useScrollLock(enabled: boolean): void;
|
|
8
9
|
export interface UseResizeHandlersParams {
|
|
9
10
|
onStart: () => void;
|
|
10
11
|
onMove: (delta: number) => void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import { Alert, Text } from '@gravity-ui/uikit';
|
|
3
|
-
import { d as debounceFn, s as styleInject, b as block } from './index-
|
|
3
|
+
import { d as debounceFn, s as styleInject, b as block } from './index-CoM0LT-x.js';
|
|
4
4
|
import '@bem-react/classname';
|
|
5
5
|
import '@gravity-ui/icons';
|
|
6
6
|
import '@gravity-ui/uikit/i18n';
|
|
@@ -65,4 +65,4 @@ const TopAlert = ({ alert, className, mobileView = false }) => {
|
|
|
65
65
|
};
|
|
66
66
|
|
|
67
67
|
export { TopAlert };
|
|
68
|
-
//# sourceMappingURL=index-
|
|
68
|
+
//# sourceMappingURL=index-AHJjBN3a.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-AHJjBN3a.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":["React"],"mappings":";;;;;;;;;;AAWA,MAAM,iBAAiB,GAAG,QAAQ;AAE3B,MAAM,iBAAiB,GAAG,CAAC,EAAC,KAAK,EAA0B,KAA4B;IAC1F,MAAM,QAAQ,GAAGA,cAAK,CAAC,MAAM,CAAiB,IAAI,CAAC;IAEnD,MAAM,sBAAsB,GAAGA,cAAK,CAAC,WAAW,CAAC,CAAC,YAAoB,KAAI;QACtE,MAAM,YAAY,GAAG;aAChB,sBAAsB,CAAC,iBAAiB;aACxC,IAAI,CAAC,CAAC,CAAuB;AAClC,QAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,CAAE,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,YAAY,GAAG,IAAI,CAAC;KAChF,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,aAAa,GAAGA,cAAK,CAAC,WAAW,CAAC,MAAK;;QACzC,sBAAsB,CAAC,CAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,YAAY,KAAI,CAAC,CAAC;AAC/D,KAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC;AAE5B,IAAAA,cAAK,CAAC,eAAe,CAAC,MAAK;AACvB,QAAA,MAAM,qBAAqB,GAAG,UAAU,CAAC,aAAa,EAAE,GAAG,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;QAE7E,IAAI,KAAK,EAAE;AACP,YAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,qBAAqB,CAAC;AACxD,YAAA,qBAAqB,EAAE;;AAE3B,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,qBAAqB,CAAC;YAC3D,sBAAsB,CAAC,CAAC,CAAC;AAC7B,SAAC;KACJ,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,sBAAsB,CAAC,CAAC;IAE5D,OAAO;QACH,QAAQ;QACR,aAAa;KAChB;AACL,CAAC;;;;;ACjCD,MAAM,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC;AAQrB,MAAM,QAAQ,GAAG,CAAC,EAAC,KAAK,EAAE,SAAS,EAAE,UAAU,GAAG,KAAK,EAAQ,KAAI;AACtE,IAAA,MAAM,EAAC,QAAQ,EAAE,aAAa,EAAC,GAAG,iBAAiB,CAAC,EAAC,KAAK,EAAC,CAAC;AAE5D,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,IAAI,CAAC;AAEhD,IAAA,MAAM,WAAW,GAAGA,cAAK,CAAC,WAAW,CAAC,MAAK;;QACvC,SAAS,CAAC,KAAK,CAAC;QAChB,CAAA,EAAA,GAAA,KAAK,aAAL,KAAK,KAAA,SAAA,GAAA,SAAA,GAAL,KAAK,CAAE,eAAe,2DAAI;AAC9B,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAAA,cAAK,CAAC,SAAS,CAAC,MAAK;QACjB,IAAI,CAAC,MAAM,EAAE;AACT,YAAA,aAAa,EAAE;;AAEvB,KAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAE3B,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;AAC1B,QAAA,OAAO,IAAI;;AAGf,IAAA,QACIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,oBAAoB,EAAE,CAAC,UAAU,IAAI,MAAM,EAAC,EAAE,SAAS,CAAC,EAAA,EAEhF,MAAM,KACHA,cAAC,CAAA,aAAA,CAAA,KAAK,IACF,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,KAAK,EAAE,KAAK,CAAC,KAAK;SACrB,CAAC,EACF,OAAO,EAAC,QAAQ,EAChB,MAAM,EAAC,YAAY,EACnB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,SAAS,EAC/B,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EACH,UAAU,IACNA,6BAAC,IAAI,EAAA,EAAC,aAAa,EAAE,CAAC,EAAE,OAAO,EAAC,QAAQ,EACnC,EAAA,KAAK,CAAC,OAAO,CACX,KAEP,KAAK,CAAC,OAAO,CAChB,EAEL,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,KAAK,CAAC,QAAQ,GAAG,WAAW,GAAG,SAAS,EACnD,CAAA,CACL,CACC;AAEd;;;;"}
|
|
@@ -121,7 +121,7 @@ function styleInject(css, ref) {
|
|
|
121
121
|
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)}";
|
|
122
122
|
styleInject(css_248z$u);
|
|
123
123
|
|
|
124
|
-
const TopAlert$1 = React__default.lazy(() => import('./index-
|
|
124
|
+
const TopAlert$1 = React__default.lazy(() => import('./index-AHJjBN3a.js').then((module) => ({ default: module.TopAlert })));
|
|
125
125
|
const Layout = ({ compact, className, children, topAlert }) => {
|
|
126
126
|
const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
|
|
127
127
|
const asideHeaderContextValue = useMemo(() => ({ size, compact }), [compact, size]);
|
|
@@ -4373,6 +4373,17 @@ function getEventClientPosition(e, direction) {
|
|
|
4373
4373
|
}
|
|
4374
4374
|
return direction === 'horizontal' ? e.clientX : e.clientY;
|
|
4375
4375
|
}
|
|
4376
|
+
function useScrollLock(enabled) {
|
|
4377
|
+
React.useEffect(() => {
|
|
4378
|
+
if (!enabled)
|
|
4379
|
+
return;
|
|
4380
|
+
const originalStyle = window.getComputedStyle(document.body).overflow;
|
|
4381
|
+
document.body.style.overflow = 'hidden';
|
|
4382
|
+
return () => {
|
|
4383
|
+
document.body.style.overflow = originalStyle;
|
|
4384
|
+
};
|
|
4385
|
+
}, [enabled]);
|
|
4386
|
+
}
|
|
4376
4387
|
function useResizeHandlers({ onStart, onMove, onEnd, direction = 'horizontal', }) {
|
|
4377
4388
|
const initialPosition = React.useRef(0);
|
|
4378
4389
|
const currentPosition = React.useRef(0);
|
|
@@ -4410,7 +4421,7 @@ function useResizeHandlers({ onStart, onMove, onEnd, direction = 'horizontal', }
|
|
|
4410
4421
|
window.addEventListener('selectstart', disableSelect, { passive: false });
|
|
4411
4422
|
document.body.style.setProperty('cursor', direction === 'horizontal' ? 'col-resize' : 'row-resize');
|
|
4412
4423
|
onStart();
|
|
4413
|
-
}, [handleEnd, handleMove, onStart, direction]);
|
|
4424
|
+
}, [handleEnd, handleMove, onStart, direction, disableSelect]);
|
|
4414
4425
|
return {
|
|
4415
4426
|
onMouseDown: handleStart,
|
|
4416
4427
|
onTouchStart: handleStart,
|
|
@@ -4460,7 +4471,7 @@ styleInject(css_248z$l);
|
|
|
4460
4471
|
const b$m = block('drawer');
|
|
4461
4472
|
const TIMEOUT = 300;
|
|
4462
4473
|
const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
|
|
4463
|
-
const { visible, content, children, direction = 'left', className, resizable, width, minResizeWidth, maxResizeWidth, onResizeStart, onResizeContinue, onResize, keepMounted = false, } = props;
|
|
4474
|
+
const { visible, content, children, direction = 'left', className, resizable, width, minResizeWidth, maxResizeWidth, onResizeStart, onResizeContinue, onResize, keepMounted = false, style = {}, } = props;
|
|
4464
4475
|
const [isInitialRender, setInitialRender] = React__default.useState(true);
|
|
4465
4476
|
const itemRef = React__default.useRef(null);
|
|
4466
4477
|
const handleRef = useForkRef(ref, itemRef);
|
|
@@ -4474,15 +4485,18 @@ const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
|
|
|
4474
4485
|
onResize,
|
|
4475
4486
|
onResizeContinue,
|
|
4476
4487
|
});
|
|
4477
|
-
const
|
|
4478
|
-
|
|
4479
|
-
if (
|
|
4480
|
-
|
|
4481
|
-
|
|
4482
|
-
|
|
4483
|
-
|
|
4488
|
+
const innerStyle = React__default.useMemo(() => {
|
|
4489
|
+
const css = Object.assign({}, style);
|
|
4490
|
+
if (resizable) {
|
|
4491
|
+
if (['left', 'right'].includes(direction)) {
|
|
4492
|
+
css.width = `${resizedWidth}px`;
|
|
4493
|
+
}
|
|
4494
|
+
else {
|
|
4495
|
+
css.height = `${resizedWidth}px`;
|
|
4496
|
+
}
|
|
4484
4497
|
}
|
|
4485
|
-
|
|
4498
|
+
return css;
|
|
4499
|
+
}, [direction, resizable, resizedWidth, style]);
|
|
4486
4500
|
React__default.useEffect(() => {
|
|
4487
4501
|
setInitialRender(true);
|
|
4488
4502
|
}, [direction]);
|
|
@@ -4493,10 +4507,10 @@ const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
|
|
|
4493
4507
|
direction: cssDirection,
|
|
4494
4508
|
hidden: isInitialRender && !visible,
|
|
4495
4509
|
resize: isResizing,
|
|
4496
|
-
}, [className]), style:
|
|
4510
|
+
}, [className]), style: innerStyle },
|
|
4497
4511
|
resizerElement, children !== null && children !== undefined ? children : content)));
|
|
4498
4512
|
});
|
|
4499
|
-
const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEscape, hideVeil, disablePortal = true, keepMounted = false, }) => {
|
|
4513
|
+
const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEscape, hideVeil, disablePortal = true, keepMounted = false, scrollLock = false, }) => {
|
|
4500
4514
|
let someItemVisible = false;
|
|
4501
4515
|
React__default.Children.forEach(children, (child) => {
|
|
4502
4516
|
if (React__default.isValidElement(child) && child.type === DrawerItem) {
|
|
@@ -4521,9 +4535,11 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
|
|
|
4521
4535
|
}, [onEscape, someItemVisible]);
|
|
4522
4536
|
const containerRef = React__default.useRef(null);
|
|
4523
4537
|
const veilRef = React__default.useRef(null);
|
|
4524
|
-
const
|
|
4538
|
+
const shouldApplyScrollLock = scrollLock && someItemVisible && hideVeil && !disablePortal;
|
|
4539
|
+
useScrollLock(shouldApplyScrollLock);
|
|
4540
|
+
return (React__default.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, nodeRef: containerRef }, (state) => {
|
|
4525
4541
|
const childrenVisible = someItemVisible && state === 'entered';
|
|
4526
|
-
|
|
4542
|
+
const content = (React__default.createElement("div", { ref: containerRef, className: b$m({ hideVeil }, className), style: style },
|
|
4527
4543
|
React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$m('veil-transition'), nodeRef: veilRef },
|
|
4528
4544
|
React__default.createElement("div", { ref: veilRef, className: b$m('veil', { hidden: hideVeil }, veilClassName), onClick: onVeilClick })),
|
|
4529
4545
|
React__default.Children.map(children, (child) => {
|
|
@@ -4534,11 +4550,16 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
|
|
|
4534
4550
|
}
|
|
4535
4551
|
return child;
|
|
4536
4552
|
})));
|
|
4553
|
+
if (disablePortal) {
|
|
4554
|
+
return content;
|
|
4555
|
+
}
|
|
4556
|
+
// When hideVeil=true, we don't use FloatingOverlay to avoid blocking mouse events
|
|
4557
|
+
if (hideVeil) {
|
|
4558
|
+
return React__default.createElement(Portal, null, content);
|
|
4559
|
+
}
|
|
4560
|
+
return (React__default.createElement(Portal, null,
|
|
4561
|
+
React__default.createElement(FloatingOverlay, { lockScroll: true }, content)));
|
|
4537
4562
|
}));
|
|
4538
|
-
if (disablePortal) {
|
|
4539
|
-
return drawer;
|
|
4540
|
-
}
|
|
4541
|
-
return (React__default.createElement(Portal, null, someItemVisible ? React__default.createElement(FloatingOverlay, { lockScroll: true }, drawer) : drawer));
|
|
4542
4563
|
};
|
|
4543
4564
|
|
|
4544
4565
|
const Panels = () => {
|
|
@@ -5609,10 +5630,23 @@ styleInject(css_248z$5);
|
|
|
5609
5630
|
|
|
5610
5631
|
const b$5 = block('mobile-overlap-panel');
|
|
5611
5632
|
const OverlapPanel = ({ title, renderContent, className, onClose, action, closeTitle = i18n('overlap_button_close'), visible, topOffset, }) => {
|
|
5612
|
-
|
|
5613
|
-
|
|
5614
|
-
|
|
5615
|
-
|
|
5633
|
+
const topOffsetValue = typeof topOffset === 'number' ? `${topOffset}px` : topOffset;
|
|
5634
|
+
const [itemPosition, setItemPosition] = React__default.useState();
|
|
5635
|
+
const drawerStyle = React__default.useMemo(() => ({ top: `calc(${topOffsetValue} + var(--gn-top-alert-height, 0px))` }), [topOffsetValue]);
|
|
5636
|
+
const drawerItemStyle = React__default.useMemo(() => itemPosition === 'absolute'
|
|
5637
|
+
? {}
|
|
5638
|
+
: { top: `calc(${topOffsetValue} + var(--gn-top-alert-height, 0px))` }, [topOffsetValue, itemPosition]);
|
|
5639
|
+
const itemRef = React__default.useRef(null);
|
|
5640
|
+
// It is necessary to determine the position of the DrawerItem in order to correctly set the top offset
|
|
5641
|
+
React__default.useLayoutEffect(() => {
|
|
5642
|
+
if (itemRef.current) {
|
|
5643
|
+
const style = getComputedStyle(itemRef.current);
|
|
5644
|
+
const position = style.position;
|
|
5645
|
+
setItemPosition(position);
|
|
5646
|
+
}
|
|
5647
|
+
}, []);
|
|
5648
|
+
return (React__default.createElement(Drawer, { className: b$5('', { action: Boolean(action) }, className), onVeilClick: onClose, onEscape: onClose, style: drawerStyle },
|
|
5649
|
+
React__default.createElement(DrawerItem, { id: "overlap", ref: itemRef, visible: visible, className: b$5('drawer-item'), style: drawerItemStyle },
|
|
5616
5650
|
React__default.createElement("div", { className: b$5('header') },
|
|
5617
5651
|
React__default.createElement(Button, { size: "l", view: "flat", className: b$5('close'), onClick: onClose, "aria-label": closeTitle },
|
|
5618
5652
|
React__default.createElement(Icon, { className: b$5('icon'), data: ArrowLeft, size: MOBILE_HEADER_ICON_SIZE })),
|
|
@@ -5625,7 +5659,7 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
|
|
|
5625
5659
|
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}";
|
|
5626
5660
|
styleInject(css_248z$4);
|
|
5627
5661
|
|
|
5628
|
-
const TopAlert = React__default.lazy(() => import('./index-
|
|
5662
|
+
const TopAlert = React__default.lazy(() => import('./index-AHJjBN3a.js').then((module) => ({ default: module.TopAlert })));
|
|
5629
5663
|
const b$4 = block('mobile-header');
|
|
5630
5664
|
const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, contentClassName, overlapPanel, topAlert, }, ref) => {
|
|
5631
5665
|
const targetRef = useForwardRef(ref);
|
|
@@ -5916,4 +5950,4 @@ const MobileFooter = ({ className, menuItems: providedMenuItems, withDivider, mo
|
|
|
5916
5950
|
};
|
|
5917
5951
|
|
|
5918
5952
|
export { AsideHeader as A, DrawerItem as D, FooterItem$1 as F, HotkeysPanel as H, Logo as L, MOBILE_HEADER_EVENT_NAMES as M, PageLayout as P, Settings as S, Title as T, AsideHeaderContextProvider as a, block as b, PageLayoutAside as c, debounceFn as d, AsideFallback as e, Drawer as f, PublicActionBar as g, useSettingsSelectionContext as h, useSettingsContext as i, FooterItem as j, getMobileHeaderCustomEvent as k, MobileHeader as l, MobileLogo as m, Footer as n, MobileFooter as o, styleInject as s, useAsideHeaderContext as u };
|
|
5919
|
-
//# sourceMappingURL=index-
|
|
5953
|
+
//# sourceMappingURL=index-CoM0LT-x.js.map
|