@gravity-ui/navigation 3.0.0-beta.7 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/components/Drawer/utils.d.ts +4 -2
- package/build/cjs/components/types.d.ts +1 -5
- package/build/cjs/{index-DIYCzM4R.js → index-B9MdZ4_0.js} +78 -88
- package/build/cjs/index-B9MdZ4_0.js.map +1 -0
- package/build/cjs/{index-BW_L44zB.js → index-C2YRXtzs.js} +2 -2
- package/build/cjs/{index-BW_L44zB.js.map → index-C2YRXtzs.js.map} +1 -1
- package/build/cjs/index.js +1 -1
- package/build/esm/components/Drawer/utils.d.ts +4 -2
- package/build/esm/components/types.d.ts +1 -5
- package/build/esm/{index-F7njAZZd.js → index-A_QXLQfD.js} +2 -2
- package/build/esm/{index-F7njAZZd.js.map → index-A_QXLQfD.js.map} +1 -1
- package/build/esm/{index-TG0tE_mY.js → index-gaa74rU5.js} +78 -88
- package/build/esm/index-gaa74rU5.js.map +1 -0
- package/build/esm/index.js +1 -1
- package/package.json +3 -3
- package/build/cjs/index-DIYCzM4R.js.map +0 -1
- package/build/esm/index-TG0tE_mY.js.map +0 -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-B9MdZ4_0.js');
|
|
6
6
|
require('@bem-react/classname');
|
|
7
7
|
require('@gravity-ui/icons');
|
|
8
8
|
require('@gravity-ui/uikit/i18n');
|
|
@@ -66,4 +66,4 @@ const TopAlert = ({ alert, className, mobileView = false }) => {
|
|
|
66
66
|
};
|
|
67
67
|
|
|
68
68
|
exports.TopAlert = TopAlert;
|
|
69
|
-
//# sourceMappingURL=index-
|
|
69
|
+
//# sourceMappingURL=index-C2YRXtzs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-C2YRXtzs.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
|
@@ -2,14 +2,15 @@ import * as React from 'react';
|
|
|
2
2
|
export declare const DRAWER_ITEM_MIN_RESIZE_WIDTH = 200;
|
|
3
3
|
export declare const DRAWER_ITEM_MAX_RESIZE_WIDTH = 800;
|
|
4
4
|
export declare const DRAWER_ITEM_INITIAL_RESIZE_WIDTH = 400;
|
|
5
|
-
export type DrawerDirection = 'right' | 'left';
|
|
5
|
+
export type DrawerDirection = 'right' | 'left' | 'top' | 'bottom';
|
|
6
6
|
export type OnResizeHandler = (width: number) => void;
|
|
7
7
|
export interface UseResizeHandlersParams {
|
|
8
8
|
onStart: () => void;
|
|
9
9
|
onMove: (delta: number) => void;
|
|
10
10
|
onEnd: (delta: number) => void;
|
|
11
|
+
direction?: 'horizontal' | 'vertical';
|
|
11
12
|
}
|
|
12
|
-
export declare function useResizeHandlers({ onStart, onMove, onEnd }: UseResizeHandlersParams): {
|
|
13
|
+
export declare function useResizeHandlers({ onStart, onMove, onEnd, direction, }: UseResizeHandlersParams): {
|
|
13
14
|
onMouseDown: (e: React.MouseEvent | React.TouchEvent) => void;
|
|
14
15
|
onTouchStart: (e: React.MouseEvent | React.TouchEvent) => void;
|
|
15
16
|
};
|
|
@@ -27,4 +28,5 @@ export declare function useResizableDrawerItem(params: UseResizableDrawerItemPar
|
|
|
27
28
|
onMouseDown: (e: React.MouseEvent | React.TouchEvent) => void;
|
|
28
29
|
onTouchStart: (e: React.MouseEvent | React.TouchEvent) => void;
|
|
29
30
|
};
|
|
31
|
+
isResizing: boolean;
|
|
30
32
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { HTMLAttributeAnchorTarget } from 'react';
|
|
2
|
-
import { AlertProps,
|
|
2
|
+
import { AlertProps, IconProps, QAProps } from '@gravity-ui/uikit';
|
|
3
3
|
import { ItemProps } from 'src/components/CompositeBar/Item/Item';
|
|
4
4
|
export type MenuItemType = 'regular' | 'action' | 'divider';
|
|
5
5
|
export type OpenModalSubscriber = (open: boolean) => void;
|
|
@@ -42,10 +42,6 @@ export interface MenuItem extends QAProps {
|
|
|
42
42
|
* The category to which the menu item belongs. Need for grouping in the display/editing mode of all pages
|
|
43
43
|
*/
|
|
44
44
|
category?: string;
|
|
45
|
-
/**
|
|
46
|
-
* Pass extra props to UIKit Button for action type item
|
|
47
|
-
*/
|
|
48
|
-
extraButtonProps?: ButtonProps;
|
|
49
45
|
}
|
|
50
46
|
export type SubheaderMenuItem = Omit<ItemProps, 'onItemClick' | 'onItemClickCapture'>;
|
|
51
47
|
export interface LogoProps {
|
|
@@ -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-gaa74rU5.js';
|
|
4
4
|
import '@bem-react/classname';
|
|
5
5
|
import '@gravity-ui/icons';
|
|
6
6
|
import '@gravity-ui/uikit/i18n';
|
|
@@ -64,4 +64,4 @@ const TopAlert = ({ alert, className, mobileView = false }) => {
|
|
|
64
64
|
};
|
|
65
65
|
|
|
66
66
|
export { TopAlert };
|
|
67
|
-
//# sourceMappingURL=index-
|
|
67
|
+
//# sourceMappingURL=index-A_QXLQfD.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-A_QXLQfD.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":"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"}
|
|
@@ -120,7 +120,7 @@ function styleInject(css, ref) {
|
|
|
120
120
|
var css_248z$u = ".g-root{--gn-aside-top-panel-height:0px}.g-root_theme_light{--gn-ah-background-color:var(--g-color-private-black-50-solid);--gn-ah-decoration-background-color:var(--g-color-private-yellow-200);--gn-ah-selected-item-background-color:var(--g-color-private-orange-200);--gn-ah-hovered-item-background-color:var(--g-color-private-black-50)}.g-root_theme_light-hc{--gn-ah-background-color:var(--g-color-private-black-50-solid);--gn-ah-decoration-background-color:var(--g-color-private-yellow-300);--gn-ah-selected-item-background-color:var(--g-color-private-orange-300);--gn-ah-hovered-item-background-color:var(--g-color-private-black-150)}.g-root_theme_dark{--gn-ah-background-color:#110e11;--gn-ah-decoration-background-color:var(--g-color-private-yellow-150);--gn-ah-selected-item-background-color:var(--g-color-private-orange-200);--gn-ah-hovered-item-background-color:var(--g-color-private-white-150)}.g-root_theme_dark-hc{--gn-ah-background-color:#050505;--gn-ah-decoration-background-color:var(--g-color-private-yellow-250);--gn-ah-selected-item-background-color:var(--g-color-private-orange-250);--gn-ah-hovered-item-background-color:var(--g-color-private-white-250)}.gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--gn-ah-background-color);--_--decoration-collapsed-background-color:var(--gn-ah-decoration-background-color);--_--decoration-expanded-background-color:var(--gn-ah-decoration-background-color);--_--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);overflow-x:auto;width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}";
|
|
121
121
|
styleInject(css_248z$u);
|
|
122
122
|
|
|
123
|
-
const TopAlert$1 = React__default.lazy(() => import('./index-
|
|
123
|
+
const TopAlert$1 = React__default.lazy(() => import('./index-A_QXLQfD.js').then((module) => ({ default: module.TopAlert })));
|
|
124
124
|
const Layout = ({ compact, className, children, topAlert }) => {
|
|
125
125
|
const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
|
|
126
126
|
const asideHeaderContextValue = useMemo(() => ({ size, compact }), [compact, size]);
|
|
@@ -1509,7 +1509,7 @@ function isMenuItem(item) {
|
|
|
1509
1509
|
return (item === null || item === undefined ? undefined : item.id) !== undefined;
|
|
1510
1510
|
}
|
|
1511
1511
|
|
|
1512
|
-
var css_248z$q = ".gn-composite-bar-item{--gn-composite-bar-item-action-size:36px;--_--horizontal-divider-line-color:var(--g-color-line-generic);--_--item-background-color-hover:var(--gn-ah-hovered-item-background-color);--_--item-general-icon-color:var(--g-color-text-primary);--_--item-icon-color:var(--g-color-text-complementary);--_--item-text-color:var(--g-color-text-primary);--_--item-collapsed-radius:7px;--_--item-selected-text-color:var(--g-color-text-primary);--_--item-selected-background-color:var(--gn-ah-selected-item-background-color);align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;height:100%;min-width:0;outline:inherit;padding:0;text-decoration:inherit;width:100%}.gn-composite-bar-item:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-composite-bar-
|
|
1512
|
+
var css_248z$q = ".gn-composite-bar-item{--gn-composite-bar-item-action-size:36px;--_--horizontal-divider-line-color:var(--g-color-line-generic);--_--item-background-color-hover:var(--gn-ah-hovered-item-background-color);--_--item-general-icon-color:var(--g-color-text-primary);--_--item-icon-color:var(--g-color-text-complementary);--_--item-text-color:var(--g-color-text-primary);--_--item-collapsed-radius:7px;--_--item-selected-text-color:var(--g-color-text-primary);--_--item-selected-background-color:var(--gn-ah-selected-item-background-color);align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;height:100%;min-width:0;outline:inherit;padding:0;text-decoration:inherit;width:100%}.gn-composite-bar-item:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-composite-bar-item__icon{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color))}.gn-composite-bar-item_current .gn-composite-bar-item__icon{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-item-icon-color,var(--_--item-icon-color)))}.gn-composite-bar-highlighted-item .gn-composite-bar-item__icon,.gn-composite-bar_subheader .gn-composite-bar-item__icon,.gn-footer-item .gn-composite-bar-item__icon{color:var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color))}.gn-composite-bar-highlighted-item.gn-composite-bar-item_current .gn-composite-bar-item__icon,.gn-composite-bar_subheader .gn-composite-bar-item_current .gn-composite-bar-item__icon,.gn-footer-item.gn-composite-bar-item_current .gn-composite-bar-item__icon{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color)))}.gn-composite-bar-item__icon-tooltip .g-action-tooltip__description{color:var(--g-color-text-light-primary);margin-block-start:0}.gn-composite-bar-item__icon-place{align-items:center;display:flex;flex-shrink:0;height:100%;justify-content:center;width:var(--gn-aside-header-min-width)}.gn-composite-bar-item__title{align-items:center;display:flex;margin-right:16px;overflow:hidden}.gn-composite-bar-item__title-text{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--gn-aside-header-item-text-color,var(--_--item-text-color));display:-webkit-box;overflow:hidden;text-align:start}.gn-composite-bar-item_current .gn-composite-bar-item__title-text{color:var(--gn-aside-header-item-current-text-color,var(--_--item-selected-text-color))}.gn-composite-bar-item__title-adornment{margin:0 10px}.gn-composite-bar-item__collapse-item{--_--item-icon-color:var(--g-color-text-misc);align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;height:100%;outline:inherit;padding:0 16px;text-decoration:inherit;width:100%}.gn-composite-bar-item__collapse-item:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-composite-bar-item__collapse-item-icon{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color));margin-right:10px}.gn-composite-bar-item__collapse-item .gn-composite-bar-item__title-adornment{margin-right:0}.gn-composite-bar-item__menu-divider{border-top:1px solid var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));cursor:default;margin:0 8px;width:100%}.gn-composite-bar-item__collapse-items-popup-content{padding:4px 0}.gn-composite-bar-item__link{align-items:center;display:flex;height:100%;width:100%}.gn-composite-bar-item__link,.gn-composite-bar-item__link:active,.gn-composite-bar-item__link:focus,.gn-composite-bar-item__link:hover,.gn-composite-bar-item__link:visited{color:inherit;outline:none;text-decoration:none}.gn-composite-bar-item__btn-icon{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.gn-composite-bar-item_type_action{background:var(--g-color-base-float);border-radius:var(--gn-composite-bar-item-action-size);box-shadow:0 0 0 1px rgba(0,0,0,.03),0 5px 6px rgba(0,0,0,.12);height:var(--gn-composite-bar-item-action-size);justify-content:center;margin:0 10px 8px;transition:transform .1s ease-out,background-color .15s linear}.gn-composite-bar-item_type_action:focus-visible{box-shadow:0 0 0 2px var(--g-color-line-misc)}.gn-composite-bar-item_type_action:hover{background-color:var(--g-color-base-float-hover)}.gn-composite-bar-item_type_action:active{box-shadow:0 1px 2px var(--g-color-sfx-shadow);transform:scale(.96);transition:none}.gn-composite-bar-item_type_action .gn-composite-bar-item__icon-place{width:var(--gn-composite-bar-item-action-size)}.gn-composite-bar-item__icon-tooltip_item-type_action{margin-left:10px}.gn-composite-bar-item:not(.gn-composite-bar-item_compact).gn-composite-bar-item_current.gn-composite-bar-item_type_regular{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color));border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar-item:not(.gn-composite-bar-item_compact):hover.gn-composite-bar-item_type_regular{background-color:var(--gn-aside-header-item-current-background-color-hover,var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)));border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar-item:not(.gn-composite-bar-item_compact):not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar-item_compact.gn-composite-bar-item_type_action{width:var(--gn-composite-bar-item-action-size)}.gn-composite-bar-item_compact.gn-composite-bar-item_type_action .gn-composite-bar-item__title{margin:0}.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon{background-color:transparent;position:relative}.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon:before{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:\"\";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-19px;margin-top:-19px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}.gn-composite-bar-item_compact:hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon{background-color:transparent;position:relative}.gn-composite-bar-item_compact:hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon:before{background-color:var(--gn-aside-header-item-current-background-color-hover,var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:\"\";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-19px;margin-top:-19px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon{background-color:transparent;position:relative}.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon:before{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:\"\";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-19px;margin-top:-19px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}";
|
|
1513
1513
|
styleInject(css_248z$q);
|
|
1514
1514
|
|
|
1515
1515
|
const b$r = block('composite-bar-item');
|
|
@@ -1558,65 +1558,32 @@ const Item$1 = (props) => {
|
|
|
1558
1558
|
const [Tag, tagProps] = item.link
|
|
1559
1559
|
? ['a', { href: item.link }]
|
|
1560
1560
|
: ['button', {}];
|
|
1561
|
-
const handleMouseEnter = () => {
|
|
1562
|
-
if (!compact) {
|
|
1563
|
-
onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter();
|
|
1564
|
-
}
|
|
1565
|
-
};
|
|
1566
|
-
const handleMouseLeave = () => {
|
|
1567
|
-
if (!compact) {
|
|
1568
|
-
onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave();
|
|
1569
|
-
}
|
|
1570
|
-
};
|
|
1571
|
-
const handleClick = (event) => {
|
|
1572
|
-
const target = event.currentTarget;
|
|
1573
|
-
if (collapsedItem) {
|
|
1574
|
-
/**
|
|
1575
|
-
* If we call onItemClick for collapsedItem then:
|
|
1576
|
-
* - User get unexpected item in onItemClick callback
|
|
1577
|
-
* - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
|
|
1578
|
-
*/
|
|
1579
|
-
toggleOpen(!open);
|
|
1580
|
-
}
|
|
1581
|
-
else if (target instanceof HTMLDivElement) {
|
|
1582
|
-
onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, false, event);
|
|
1583
|
-
}
|
|
1584
|
-
};
|
|
1585
|
-
const renderActionButton = () => (React__default.createElement("div", { className: compact ? b$r('action-container-compact') : b$r('action-container') },
|
|
1586
|
-
React__default.createElement(Button, Object.assign({ onClick: handleClick, className: b$r('action', { compact, collapse: !compact }, className), ref: ref, "data-qa": item.qa, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, size: "l", view: "raised", type: "button", pin: "circle-circle" }, item.extraButtonProps),
|
|
1587
|
-
React__default.createElement("div", { className: b$r('action-btn-container') },
|
|
1588
|
-
React__default.createElement("div", { className: b$r('action-icon') }, makeIconNode(iconEl)),
|
|
1589
|
-
!compact && (React__default.createElement("div", { className: b$r('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl))))));
|
|
1590
|
-
const renderTagContainer = () => (React__default.createElement(Tag, Object.assign({}, tagProps, { className: b$r({ type, current, compact }, className), ref: ref, "data-qa": item.qa, onClick: (event) => {
|
|
1591
|
-
if (collapsedItem) {
|
|
1592
|
-
/**
|
|
1593
|
-
* If we call onItemClick for collapsedItem then:
|
|
1594
|
-
* - User get unexpected item in onItemClick callback
|
|
1595
|
-
* - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
|
|
1596
|
-
*/
|
|
1597
|
-
toggleOpen(!open);
|
|
1598
|
-
onCollapseItemClick === null || onCollapseItemClick === undefined ? undefined : onCollapseItemClick();
|
|
1599
|
-
}
|
|
1600
|
-
else {
|
|
1601
|
-
onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, false, event);
|
|
1602
|
-
}
|
|
1603
|
-
}, onClickCapture: onItemClickCapture, onMouseEnter: () => {
|
|
1604
|
-
if (!compact) {
|
|
1605
|
-
onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter();
|
|
1606
|
-
}
|
|
1607
|
-
}, onMouseLeave: () => {
|
|
1608
|
-
if (!compact) {
|
|
1609
|
-
onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave();
|
|
1610
|
-
}
|
|
1611
|
-
} }),
|
|
1612
|
-
React__default.createElement("div", { className: b$r('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
|
|
1613
|
-
React__default.createElement("div", { className: b$r('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl)));
|
|
1614
1561
|
const createdNode = (React__default.createElement(React__default.Fragment, null,
|
|
1615
|
-
type
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1562
|
+
React__default.createElement(Tag, Object.assign({}, tagProps, { className: b$r({ type, current, compact }, className), ref: ref, "data-qa": item.qa, onClick: (event) => {
|
|
1563
|
+
if (collapsedItem) {
|
|
1564
|
+
/**
|
|
1565
|
+
* If we call onItemClick for collapsedItem then:
|
|
1566
|
+
* - User get unexpected item in onItemClick callback
|
|
1567
|
+
* - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
|
|
1568
|
+
*/
|
|
1569
|
+
toggleOpen(!open);
|
|
1570
|
+
onCollapseItemClick === null || onCollapseItemClick === undefined ? undefined : onCollapseItemClick();
|
|
1571
|
+
}
|
|
1572
|
+
else {
|
|
1573
|
+
onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, false, event);
|
|
1574
|
+
}
|
|
1575
|
+
}, onClickCapture: onItemClickCapture, onMouseEnter: () => {
|
|
1576
|
+
if (!compact) {
|
|
1577
|
+
onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter();
|
|
1578
|
+
}
|
|
1579
|
+
}, onMouseLeave: () => {
|
|
1580
|
+
if (!compact) {
|
|
1581
|
+
onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave();
|
|
1582
|
+
}
|
|
1583
|
+
} }),
|
|
1584
|
+
React__default.createElement("div", { className: b$r('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
|
|
1585
|
+
React__default.createElement("div", { className: b$r('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl)),
|
|
1586
|
+
renderPopupContent && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React__default.createElement(Popup, { strategy: "fixed", open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: handleClosePopup, onOpenChange: onOpenChangePopup }, renderPopupContent()))));
|
|
1620
1587
|
return createdNode;
|
|
1621
1588
|
};
|
|
1622
1589
|
const iconNode = icon ? (React__default.createElement(Icon, { qa: iconQa, data: icon, size: iconSize, className: b$r('icon') })) : null;
|
|
@@ -4279,36 +4246,41 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, T
|
|
|
4279
4246
|
const DRAWER_ITEM_MIN_RESIZE_WIDTH = 200;
|
|
4280
4247
|
const DRAWER_ITEM_MAX_RESIZE_WIDTH = 800;
|
|
4281
4248
|
const DRAWER_ITEM_INITIAL_RESIZE_WIDTH = 400;
|
|
4282
|
-
function
|
|
4283
|
-
var _a, _b;
|
|
4284
|
-
|
|
4249
|
+
function getEventClientPosition(e, direction) {
|
|
4250
|
+
var _a, _b, _c, _d;
|
|
4251
|
+
if ('touches' in e) {
|
|
4252
|
+
return direction === 'horizontal'
|
|
4253
|
+
? ((_b = (_a = e.touches[0]) === null || _a === undefined ? undefined : _a.clientX) !== null && _b !== undefined ? _b : 0)
|
|
4254
|
+
: ((_d = (_c = e.touches[0]) === null || _c === undefined ? undefined : _c.clientY) !== null && _d !== undefined ? _d : 0);
|
|
4255
|
+
}
|
|
4256
|
+
return direction === 'horizontal' ? e.clientX : e.clientY;
|
|
4285
4257
|
}
|
|
4286
|
-
function useResizeHandlers({ onStart, onMove, onEnd }) {
|
|
4287
|
-
const
|
|
4288
|
-
const
|
|
4258
|
+
function useResizeHandlers({ onStart, onMove, onEnd, direction = 'horizontal', }) {
|
|
4259
|
+
const initialPosition = React.useRef(0);
|
|
4260
|
+
const currentPosition = React.useRef(0);
|
|
4289
4261
|
const handleMove = React.useCallback((e) => {
|
|
4290
|
-
const
|
|
4291
|
-
if (
|
|
4262
|
+
const current = getEventClientPosition(e, direction);
|
|
4263
|
+
if (currentPosition.current === current) {
|
|
4292
4264
|
return;
|
|
4293
4265
|
}
|
|
4294
|
-
|
|
4295
|
-
const delta =
|
|
4266
|
+
currentPosition.current = current;
|
|
4267
|
+
const delta = initialPosition.current - current;
|
|
4296
4268
|
onMove(delta);
|
|
4297
|
-
}, [onMove]);
|
|
4269
|
+
}, [onMove, direction]);
|
|
4298
4270
|
const handleEnd = React.useCallback((e) => {
|
|
4299
4271
|
window.removeEventListener('mousemove', handleMove);
|
|
4300
4272
|
window.removeEventListener('touchmove', handleMove);
|
|
4301
4273
|
document.body.style.removeProperty('user-select');
|
|
4302
4274
|
document.body.style.removeProperty('-webkit-user-select');
|
|
4303
4275
|
document.body.style.removeProperty('cursor');
|
|
4304
|
-
const
|
|
4305
|
-
const delta =
|
|
4276
|
+
const current = getEventClientPosition(e, direction);
|
|
4277
|
+
const delta = initialPosition.current - current;
|
|
4306
4278
|
onEnd(delta);
|
|
4307
|
-
}, [handleMove, onEnd]);
|
|
4279
|
+
}, [handleMove, onEnd, direction]);
|
|
4308
4280
|
const handleStart = React.useCallback((e) => {
|
|
4309
|
-
const
|
|
4310
|
-
|
|
4311
|
-
|
|
4281
|
+
const current = getEventClientPosition(e, direction);
|
|
4282
|
+
initialPosition.current = current;
|
|
4283
|
+
currentPosition.current = current;
|
|
4312
4284
|
window.addEventListener('mouseup', handleEnd, { once: true });
|
|
4313
4285
|
window.addEventListener('touchend', handleEnd, { once: true });
|
|
4314
4286
|
window.addEventListener('touchcancel', handleEnd, { once: true });
|
|
@@ -4318,20 +4290,20 @@ function useResizeHandlers({ onStart, onMove, onEnd }) {
|
|
|
4318
4290
|
document.body.style.setProperty('-webkit-user-select', 'none');
|
|
4319
4291
|
document.body.style.setProperty('cursor', 'col-resize');
|
|
4320
4292
|
onStart();
|
|
4321
|
-
}, [handleEnd, handleMove, onStart]);
|
|
4293
|
+
}, [handleEnd, handleMove, onStart, direction]);
|
|
4322
4294
|
return {
|
|
4323
4295
|
onMouseDown: handleStart,
|
|
4324
4296
|
onTouchStart: handleStart,
|
|
4325
4297
|
};
|
|
4326
4298
|
}
|
|
4327
4299
|
function useResizableDrawerItem(params) {
|
|
4328
|
-
const { direction, width, minResizeWidth = DRAWER_ITEM_MIN_RESIZE_WIDTH, maxResizeWidth = DRAWER_ITEM_MAX_RESIZE_WIDTH, onResizeStart, onResize, } = params;
|
|
4300
|
+
const { direction = 'left', width, minResizeWidth = DRAWER_ITEM_MIN_RESIZE_WIDTH, maxResizeWidth = DRAWER_ITEM_MAX_RESIZE_WIDTH, onResizeStart, onResize, } = params;
|
|
4329
4301
|
const [isResizing, setIsResizing] = React.useState(false);
|
|
4330
4302
|
const [resizeDelta, setResizeDelta] = React.useState(0);
|
|
4331
4303
|
const [internalWidth, setInternalWidth] = React.useState(width !== null && width !== undefined ? width : DRAWER_ITEM_INITIAL_RESIZE_WIDTH);
|
|
4332
4304
|
const getClampedWidth = React.useCallback((width) => Math.min(Math.max(width, minResizeWidth), maxResizeWidth), [minResizeWidth, maxResizeWidth]);
|
|
4333
4305
|
const getResizedWidth = React.useCallback((delta) => {
|
|
4334
|
-
const signedDelta =
|
|
4306
|
+
const signedDelta = ['right', 'bottom'].includes(direction) ? delta : -delta;
|
|
4335
4307
|
const newWidth = (width !== null && width !== undefined ? width : internalWidth) + signedDelta;
|
|
4336
4308
|
return getClampedWidth(newWidth);
|
|
4337
4309
|
}, [width, internalWidth, direction, getClampedWidth]);
|
|
@@ -4352,11 +4324,16 @@ function useResizableDrawerItem(params) {
|
|
|
4352
4324
|
const displayWidth = isResizing
|
|
4353
4325
|
? getResizedWidth(resizeDelta)
|
|
4354
4326
|
: getClampedWidth(width !== null && width !== undefined ? width : internalWidth);
|
|
4355
|
-
const handlers = useResizeHandlers({
|
|
4356
|
-
|
|
4327
|
+
const handlers = useResizeHandlers({
|
|
4328
|
+
onStart,
|
|
4329
|
+
onMove,
|
|
4330
|
+
onEnd,
|
|
4331
|
+
direction: ['left', 'right'].includes(direction) ? 'horizontal' : 'vertical',
|
|
4332
|
+
});
|
|
4333
|
+
return { resizedWidth: displayWidth, resizerHandlers: handlers, isResizing };
|
|
4357
4334
|
}
|
|
4358
4335
|
|
|
4359
|
-
var css_248z$l = ".gn-drawer{--_--item-shadow-default:0 1px 5px 0 var(--g-color-sfx-shadow);--_--item-position:fixed;--_--resizer-width:8px;--_--resizer-color:var(--g-color-base-generic);--_--resizer-handle-color:var(--g-color-line-generic);--_--resizer-handle-color-hover:var(--g-color-line-generic-hover);--_--resizer-z-index:100;--_--veil-background-color:var(--g-color-sfx-veil);pointer-events:none}.gn-drawer_hideVeil{--_--item-shadow:var(--gn-drawer-item-shadow,var(--_--item-shadow-default))}.gn-drawer__item{background-color:var(--g-color-base-background);bottom:0;box-shadow:var(--_--item-shadow,none);height:100%;left:var(--gn-aside-header-size,0);pointer-events:auto;position:var(--gn-drawer-item-position,var(--_--item-position));top:0;will-change:transform;z-index:var(--gn-drawer-item-z-index)}.gn-drawer__item_direction_right{left:auto;right:0}.gn-drawer__item-transition-enter{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-enter{transform:translate(100%)}.gn-drawer__item-transition-enter-active,.gn-drawer__item-transition_direction_right-enter-active{transform:translate(0);transition:transform .3s}.gn-drawer__item-transition-enter-done,.gn-drawer__item-transition_direction_right-enter-done{filter:blur(0);transform:translateZ(0)}.gn-drawer__item-transition-exit,.gn-drawer__item-transition_direction_right-exit{transform:translate(0)}.gn-drawer__item-transition-exit-active,.gn-drawer__item-transition_direction_right-exit-active{transition:transform .3s}.gn-drawer__item-transition-exit-active{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-exit-active{transform:translate(100%)}.gn-drawer__item-transition-exit-done,.gn-drawer__item-transition_direction_right-exit-done,.gn-drawer__item_hidden{visibility:hidden}.gn-drawer__veil{background-color:var(--gn-drawer-veil-background-color,var(--_--veil-background-color));inset:0;pointer-events:auto;position:absolute;z-index:var(--gn-drawer-veil-z-index)}.gn-drawer__veil_hidden{display:none}.gn-drawer__veil-transition-enter{opacity:0}.gn-drawer__veil-transition-enter-active{opacity:1;transition:opacity .3s}.gn-drawer__veil-transition-exit{opacity:1}.gn-drawer__veil-transition-exit-active{opacity:0;transition:opacity .3s}.gn-drawer__veil-transition-exit-done{visibility:hidden}.gn-drawer__resizer-handle{background:var(--gn-drawer-item-resizer-handle-color,var(--_--resizer-handle-color));border-radius:2px;height:28px;width:2px}.gn-drawer__resizer{align-items:center;background:var(--gn-drawer-item-resizer-color,var(--_--resizer-color));cursor:col-resize;display:flex;flex-direction:column;height:100%;justify-content:center;position:absolute;top:0;width:var(--gn-drawer-item-resizer-width,var(--_--resizer-width));z-index:var(--gn-drawer-item-resizer-z-index,var(--_--resizer-z-index))}.gn-drawer__resizer_direction_right{left:0}.gn-drawer__resizer_direction_left{right:0}.gn-drawer__resizer:hover .gn-drawer__resizer-handle{background:var(--gn-drawer-item-resizer-handle-color-hover,var(--_--resizer-handle-color-hover))}";
|
|
4336
|
+
var css_248z$l = ".gn-drawer{--_--item-shadow-default:0 1px 5px 0 var(--g-color-sfx-shadow);--_--item-position:fixed;--_--resizer-width:8px;--_--resizer-color:var(--g-color-base-generic);--_--resizer-handle-color:var(--g-color-line-generic);--_--resizer-handle-color-hover:var(--g-color-line-generic-hover);--_--resizer-z-index:100;--_--veil-background-color:var(--g-color-sfx-veil);pointer-events:none}.gn-drawer_hideVeil{--_--item-shadow:var(--gn-drawer-item-shadow,var(--_--item-shadow-default))}.gn-drawer__item{background-color:var(--g-color-base-background);bottom:0;box-shadow:var(--_--item-shadow,none);height:100%;left:var(--gn-aside-header-size,0);pointer-events:auto;position:var(--gn-drawer-item-position,var(--_--item-position));top:0;will-change:transform;z-index:var(--gn-drawer-item-z-index)}.gn-drawer__item_direction_right{left:auto;right:0}.gn-drawer__item_direction_top{bottom:auto;right:0}.gn-drawer__item_direction_bottom{right:0;top:auto}.gn-drawer__item-transition-enter{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-enter{transform:translate(100%)}.gn-drawer__item-transition_direction_top-enter{transform:translateY(-100%)}.gn-drawer__item-transition_direction_bottom-enter{transform:translateY(100%)}.gn-drawer__item-transition-enter-active,.gn-drawer__item-transition_direction_bottom-enter-active,.gn-drawer__item-transition_direction_right-enter-active,.gn-drawer__item-transition_direction_top-enter-active{transform:translate(0);transition:transform .3s}.gn-drawer__item-transition-enter-done,.gn-drawer__item-transition_direction_bottom-enter-done,.gn-drawer__item-transition_direction_right-enter-done,.gn-drawer__item-transition_direction_top-enter-done{filter:blur(0);transform:translateZ(0)}.gn-drawer__item-transition-exit,.gn-drawer__item-transition_direction_bottom-exit,.gn-drawer__item-transition_direction_right-exit,.gn-drawer__item-transition_direction_top-exit{transform:translate(0)}.gn-drawer__item-transition-exit-active,.gn-drawer__item-transition_direction_bottom-exit-active,.gn-drawer__item-transition_direction_right-exit-active,.gn-drawer__item-transition_direction_top-exit-active{transition:transform .3s}.gn-drawer__item-transition-exit-active{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-exit-active{transform:translate(100%)}.gn-drawer__item-transition_direction_top-exit-active{transform:translateY(-100%)}.gn-drawer__item-transition_direction_bottom-exit-active{transform:translateY(100%)}.gn-drawer__item-transition-exit-done,.gn-drawer__item-transition_direction_bottom-exit-done,.gn-drawer__item-transition_direction_right-exit-done,.gn-drawer__item-transition_direction_top-exit-done,.gn-drawer__item_hidden{visibility:hidden}.gn-drawer__veil{background-color:var(--gn-drawer-veil-background-color,var(--_--veil-background-color));inset:0;pointer-events:auto;position:absolute;z-index:var(--gn-drawer-veil-z-index)}.gn-drawer__veil_hidden{display:none}.gn-drawer__veil-transition-enter{opacity:0}.gn-drawer__veil-transition-enter-active{opacity:1;transition:opacity .3s}.gn-drawer__veil-transition-exit{opacity:1}.gn-drawer__veil-transition-exit-active{opacity:0;transition:opacity .3s}.gn-drawer__veil-transition-exit-done{visibility:hidden}.gn-drawer__resizer-handle{background:var(--gn-drawer-item-resizer-handle-color,var(--_--resizer-handle-color));border-radius:2px;height:28px;width:2px}.gn-drawer__resizer-handle_direction_bottom,.gn-drawer__resizer-handle_direction_top{height:2px;width:28px}.gn-drawer__resizer{align-items:center;background:var(--gn-drawer-item-resizer-color,var(--_--resizer-color));cursor:col-resize;display:flex;flex-direction:column;height:100%;justify-content:center;position:absolute;top:0;width:var(--gn-drawer-item-resizer-width,var(--_--resizer-width));z-index:var(--gn-drawer-item-resizer-z-index,var(--_--resizer-z-index))}.gn-drawer__resizer_direction_right{left:0}.gn-drawer__resizer_direction_left{right:0}.gn-drawer__resizer_direction_top{bottom:0;left:0;top:unset}.gn-drawer__resizer_direction_bottom{left:0;top:0}.gn-drawer__resizer_direction_bottom,.gn-drawer__resizer_direction_top{height:var(--gn-drawer-item-resizer-width,var(--_--resizer-width));width:100%}.gn-drawer__resizer:hover .gn-drawer__resizer-handle{background:var(--gn-drawer-item-resizer-handle-color-hover,var(--_--resizer-handle-color-hover))}";
|
|
4360
4337
|
styleInject(css_248z$l);
|
|
4361
4338
|
|
|
4362
4339
|
const b$m = block('drawer');
|
|
@@ -4367,7 +4344,7 @@ const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
|
|
|
4367
4344
|
const itemRef = React__default.useRef(null);
|
|
4368
4345
|
const handleRef = useForkRef(ref, itemRef);
|
|
4369
4346
|
const cssDirection = direction === 'left' ? undefined : direction;
|
|
4370
|
-
const { resizedWidth, resizerHandlers } = useResizableDrawerItem({
|
|
4347
|
+
const { resizedWidth, resizerHandlers, isResizing } = useResizableDrawerItem({
|
|
4371
4348
|
direction,
|
|
4372
4349
|
width,
|
|
4373
4350
|
minResizeWidth,
|
|
@@ -4375,13 +4352,26 @@ const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
|
|
|
4375
4352
|
onResizeStart,
|
|
4376
4353
|
onResize,
|
|
4377
4354
|
});
|
|
4355
|
+
const style = {};
|
|
4356
|
+
if (resizable) {
|
|
4357
|
+
if (['left', 'right'].includes(direction)) {
|
|
4358
|
+
style.width = `${resizedWidth}px`;
|
|
4359
|
+
}
|
|
4360
|
+
else {
|
|
4361
|
+
style.height = `${resizedWidth}px`;
|
|
4362
|
+
}
|
|
4363
|
+
}
|
|
4378
4364
|
React__default.useEffect(() => {
|
|
4379
4365
|
setInitialRender(true);
|
|
4380
4366
|
}, [direction]);
|
|
4381
4367
|
const resizerElement = resizable ? (React__default.createElement("div", Object.assign({ className: b$m('resizer', { direction }) }, resizerHandlers),
|
|
4382
|
-
React__default.createElement("div", { className: b$m('resizer-handle') }))) : null;
|
|
4368
|
+
React__default.createElement("div", { className: b$m('resizer-handle', { direction }) }))) : null;
|
|
4383
4369
|
return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, classNames: b$m('item-transition', { direction: cssDirection }), nodeRef: itemRef, onEnter: () => setInitialRender(false), onExit: () => setInitialRender(false) },
|
|
4384
|
-
React__default.createElement("div", { ref: handleRef, className: b$m('item', {
|
|
4370
|
+
React__default.createElement("div", { ref: handleRef, className: b$m('item', {
|
|
4371
|
+
direction: cssDirection,
|
|
4372
|
+
hidden: isInitialRender && !visible,
|
|
4373
|
+
resize: isResizing,
|
|
4374
|
+
}, [className]), style: style },
|
|
4385
4375
|
resizerElement, children !== null && children !== undefined ? children : content)));
|
|
4386
4376
|
});
|
|
4387
4377
|
const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEscape, hideVeil, disablePortal = true, keepMounted = false, }) => {
|
|
@@ -5395,7 +5385,7 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
|
|
|
5395
5385
|
var css_248z$4 = ".gn-mobile-header{--mobile-header-min-heigth:50px;--mobile-header-icon-size:20px}.gn-mobile-header,.gn-mobile-header__top-alert{background-color:var(--g-color-base-background)}.gn-mobile-header__top-alert{position:sticky;top:0}.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;z-index:var(--gn-mobile-header-z-index,100)}.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__content{overflow:auto}";
|
|
5396
5386
|
styleInject(css_248z$4);
|
|
5397
5387
|
|
|
5398
|
-
const TopAlert = React__default.lazy(() => import('./index-
|
|
5388
|
+
const TopAlert = React__default.lazy(() => import('./index-A_QXLQfD.js').then((module) => ({ default: module.TopAlert })));
|
|
5399
5389
|
const b$4 = block('mobile-header');
|
|
5400
5390
|
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) => {
|
|
5401
5391
|
const targetRef = useForwardRef(ref);
|
|
@@ -5686,4 +5676,4 @@ const MobileFooter = ({ className, menuItems: providedMenuItems, withDivider, mo
|
|
|
5686
5676
|
};
|
|
5687
5677
|
|
|
5688
5678
|
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 };
|
|
5689
|
-
//# sourceMappingURL=index-
|
|
5679
|
+
//# sourceMappingURL=index-gaa74rU5.js.map
|