@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.
@@ -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, ButtonProps, IconProps, QAProps } from '@gravity-ui/uikit';
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 {
@@ -140,7 +140,7 @@ function styleInject(css, ref) {
140
140
  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)}";
141
141
  styleInject(css_248z$u);
142
142
 
143
- const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-BW_L44zB.js'); }).then((module) => ({ default: module.TopAlert })));
143
+ const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-C2YRXtzs.js'); }).then((module) => ({ default: module.TopAlert })));
144
144
  const Layout = ({ compact, className, children, topAlert }) => {
145
145
  const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
146
146
  const asideHeaderContextValue = React.useMemo(() => ({ size, compact }), [compact, size]);
@@ -1529,7 +1529,7 @@ function isMenuItem(item) {
1529
1529
  return (item === null || item === undefined ? undefined : item.id) !== undefined;
1530
1530
  }
1531
1531
 
1532
- 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__action{align-items:center;cursor:pointer;display:flex;height:100%;min-width:0;width:100%}.gn-composite-bar-item__action_collapse{display:flex;width:216px}.gn-composite-bar-item__action-btn-container{display:flex}.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__action-icon{align-items:center;color:var(--gn-aside-header-item-icon-color,var(--g-color-text-complementary));display:flex;flex-shrink:0;justify-content:center;width:var(--gn-composite-bar-item-action-size,36px)}.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__action-container{margin:0 10px 8px;width:100%}.gn-composite-bar-item__action-container-compact{height:var(--gn-composite-bar-item-action-size,36px);margin:0 10px 8px;width:var(--gn-composite-bar-item-action-size,36px)}.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}";
1532
+ 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}";
1533
1533
  styleInject(css_248z$q);
1534
1534
 
1535
1535
  const b$r = block('composite-bar-item');
@@ -1578,65 +1578,32 @@ const Item$1 = (props) => {
1578
1578
  const [Tag, tagProps] = item.link
1579
1579
  ? ['a', { href: item.link }]
1580
1580
  : ['button', {}];
1581
- const handleMouseEnter = () => {
1582
- if (!compact) {
1583
- onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter();
1584
- }
1585
- };
1586
- const handleMouseLeave = () => {
1587
- if (!compact) {
1588
- onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave();
1589
- }
1590
- };
1591
- const handleClick = (event) => {
1592
- const target = event.currentTarget;
1593
- if (collapsedItem) {
1594
- /**
1595
- * If we call onItemClick for collapsedItem then:
1596
- * - User get unexpected item in onItemClick callback
1597
- * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
1598
- */
1599
- toggleOpen(!open);
1600
- }
1601
- else if (target instanceof HTMLDivElement) {
1602
- onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, false, event);
1603
- }
1604
- };
1605
- const renderActionButton = () => (React.createElement("div", { className: compact ? b$r('action-container-compact') : b$r('action-container') },
1606
- React.createElement(uikit.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),
1607
- React.createElement("div", { className: b$r('action-btn-container') },
1608
- React.createElement("div", { className: b$r('action-icon') }, makeIconNode(iconEl)),
1609
- !compact && (React.createElement("div", { className: b$r('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl))))));
1610
- const renderTagContainer = () => (React.createElement(Tag, Object.assign({}, tagProps, { className: b$r({ type, current, compact }, className), ref: ref, "data-qa": item.qa, onClick: (event) => {
1611
- if (collapsedItem) {
1612
- /**
1613
- * If we call onItemClick for collapsedItem then:
1614
- * - User get unexpected item in onItemClick callback
1615
- * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
1616
- */
1617
- toggleOpen(!open);
1618
- onCollapseItemClick === null || onCollapseItemClick === undefined ? undefined : onCollapseItemClick();
1619
- }
1620
- else {
1621
- onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, false, event);
1622
- }
1623
- }, onClickCapture: onItemClickCapture, onMouseEnter: () => {
1624
- if (!compact) {
1625
- onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter();
1626
- }
1627
- }, onMouseLeave: () => {
1628
- if (!compact) {
1629
- onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave();
1630
- }
1631
- } }),
1632
- React.createElement("div", { className: b$r('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
1633
- React.createElement("div", { className: b$r('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl)));
1634
1581
  const createdNode = (React.createElement(React.Fragment, null,
1635
- type === 'action' ? renderActionButton() : renderTagContainer(),
1636
- renderPopupContent && (anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React.createElement(uikit.Popup, { strategy: "fixed", open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: handleClosePopup, onOpenChange: onOpenChangePopup }, renderPopupContent()))));
1637
- if (item.link) {
1638
- return (React.createElement("a", { href: item.link, className: b$r('link') }, createdNode));
1639
- }
1582
+ React.createElement(Tag, Object.assign({}, tagProps, { className: b$r({ type, current, compact }, className), ref: ref, "data-qa": item.qa, onClick: (event) => {
1583
+ if (collapsedItem) {
1584
+ /**
1585
+ * If we call onItemClick for collapsedItem then:
1586
+ * - User get unexpected item in onItemClick callback
1587
+ * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
1588
+ */
1589
+ toggleOpen(!open);
1590
+ onCollapseItemClick === null || onCollapseItemClick === undefined ? undefined : onCollapseItemClick();
1591
+ }
1592
+ else {
1593
+ onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, false, event);
1594
+ }
1595
+ }, onClickCapture: onItemClickCapture, onMouseEnter: () => {
1596
+ if (!compact) {
1597
+ onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter();
1598
+ }
1599
+ }, onMouseLeave: () => {
1600
+ if (!compact) {
1601
+ onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave();
1602
+ }
1603
+ } }),
1604
+ React.createElement("div", { className: b$r('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
1605
+ React.createElement("div", { className: b$r('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl)),
1606
+ renderPopupContent && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React.createElement(uikit.Popup, { strategy: "fixed", open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: handleClosePopup, onOpenChange: onOpenChangePopup }, renderPopupContent()))));
1640
1607
  return createdNode;
1641
1608
  };
1642
1609
  const iconNode = icon ? (React.createElement(uikit.Icon, { qa: iconQa, data: icon, size: iconSize, className: b$r('icon') })) : null;
@@ -4299,36 +4266,41 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, T
4299
4266
  const DRAWER_ITEM_MIN_RESIZE_WIDTH = 200;
4300
4267
  const DRAWER_ITEM_MAX_RESIZE_WIDTH = 800;
4301
4268
  const DRAWER_ITEM_INITIAL_RESIZE_WIDTH = 400;
4302
- function getEventClientX(e) {
4303
- var _a, _b;
4304
- return 'touches' in e ? ((_b = (_a = e.touches[0]) === null || _a === undefined ? undefined : _a.clientX) !== null && _b !== undefined ? _b : 0) : e.clientX;
4269
+ function getEventClientPosition(e, direction) {
4270
+ var _a, _b, _c, _d;
4271
+ if ('touches' in e) {
4272
+ return direction === 'horizontal'
4273
+ ? ((_b = (_a = e.touches[0]) === null || _a === undefined ? undefined : _a.clientX) !== null && _b !== undefined ? _b : 0)
4274
+ : ((_d = (_c = e.touches[0]) === null || _c === undefined ? undefined : _c.clientY) !== null && _d !== undefined ? _d : 0);
4275
+ }
4276
+ return direction === 'horizontal' ? e.clientX : e.clientY;
4305
4277
  }
4306
- function useResizeHandlers({ onStart, onMove, onEnd }) {
4307
- const initialXPosition = React__namespace.useRef(0);
4308
- const currentXPosition = React__namespace.useRef(0);
4278
+ function useResizeHandlers({ onStart, onMove, onEnd, direction = 'horizontal', }) {
4279
+ const initialPosition = React__namespace.useRef(0);
4280
+ const currentPosition = React__namespace.useRef(0);
4309
4281
  const handleMove = React__namespace.useCallback((e) => {
4310
- const currentX = getEventClientX(e);
4311
- if (currentXPosition.current === currentX) {
4282
+ const current = getEventClientPosition(e, direction);
4283
+ if (currentPosition.current === current) {
4312
4284
  return;
4313
4285
  }
4314
- currentXPosition.current = currentX;
4315
- const delta = initialXPosition.current - currentX;
4286
+ currentPosition.current = current;
4287
+ const delta = initialPosition.current - current;
4316
4288
  onMove(delta);
4317
- }, [onMove]);
4289
+ }, [onMove, direction]);
4318
4290
  const handleEnd = React__namespace.useCallback((e) => {
4319
4291
  window.removeEventListener('mousemove', handleMove);
4320
4292
  window.removeEventListener('touchmove', handleMove);
4321
4293
  document.body.style.removeProperty('user-select');
4322
4294
  document.body.style.removeProperty('-webkit-user-select');
4323
4295
  document.body.style.removeProperty('cursor');
4324
- const currentX = getEventClientX(e);
4325
- const delta = initialXPosition.current - currentX;
4296
+ const current = getEventClientPosition(e, direction);
4297
+ const delta = initialPosition.current - current;
4326
4298
  onEnd(delta);
4327
- }, [handleMove, onEnd]);
4299
+ }, [handleMove, onEnd, direction]);
4328
4300
  const handleStart = React__namespace.useCallback((e) => {
4329
- const currentX = getEventClientX(e);
4330
- initialXPosition.current = currentX;
4331
- currentXPosition.current = currentX;
4301
+ const current = getEventClientPosition(e, direction);
4302
+ initialPosition.current = current;
4303
+ currentPosition.current = current;
4332
4304
  window.addEventListener('mouseup', handleEnd, { once: true });
4333
4305
  window.addEventListener('touchend', handleEnd, { once: true });
4334
4306
  window.addEventListener('touchcancel', handleEnd, { once: true });
@@ -4338,20 +4310,20 @@ function useResizeHandlers({ onStart, onMove, onEnd }) {
4338
4310
  document.body.style.setProperty('-webkit-user-select', 'none');
4339
4311
  document.body.style.setProperty('cursor', 'col-resize');
4340
4312
  onStart();
4341
- }, [handleEnd, handleMove, onStart]);
4313
+ }, [handleEnd, handleMove, onStart, direction]);
4342
4314
  return {
4343
4315
  onMouseDown: handleStart,
4344
4316
  onTouchStart: handleStart,
4345
4317
  };
4346
4318
  }
4347
4319
  function useResizableDrawerItem(params) {
4348
- const { direction, width, minResizeWidth = DRAWER_ITEM_MIN_RESIZE_WIDTH, maxResizeWidth = DRAWER_ITEM_MAX_RESIZE_WIDTH, onResizeStart, onResize, } = params;
4320
+ const { direction = 'left', width, minResizeWidth = DRAWER_ITEM_MIN_RESIZE_WIDTH, maxResizeWidth = DRAWER_ITEM_MAX_RESIZE_WIDTH, onResizeStart, onResize, } = params;
4349
4321
  const [isResizing, setIsResizing] = React__namespace.useState(false);
4350
4322
  const [resizeDelta, setResizeDelta] = React__namespace.useState(0);
4351
4323
  const [internalWidth, setInternalWidth] = React__namespace.useState(width !== null && width !== undefined ? width : DRAWER_ITEM_INITIAL_RESIZE_WIDTH);
4352
4324
  const getClampedWidth = React__namespace.useCallback((width) => Math.min(Math.max(width, minResizeWidth), maxResizeWidth), [minResizeWidth, maxResizeWidth]);
4353
4325
  const getResizedWidth = React__namespace.useCallback((delta) => {
4354
- const signedDelta = direction === 'right' ? delta : -delta;
4326
+ const signedDelta = ['right', 'bottom'].includes(direction) ? delta : -delta;
4355
4327
  const newWidth = (width !== null && width !== undefined ? width : internalWidth) + signedDelta;
4356
4328
  return getClampedWidth(newWidth);
4357
4329
  }, [width, internalWidth, direction, getClampedWidth]);
@@ -4372,11 +4344,16 @@ function useResizableDrawerItem(params) {
4372
4344
  const displayWidth = isResizing
4373
4345
  ? getResizedWidth(resizeDelta)
4374
4346
  : getClampedWidth(width !== null && width !== undefined ? width : internalWidth);
4375
- const handlers = useResizeHandlers({ onStart, onMove, onEnd });
4376
- return { resizedWidth: displayWidth, resizerHandlers: handlers };
4347
+ const handlers = useResizeHandlers({
4348
+ onStart,
4349
+ onMove,
4350
+ onEnd,
4351
+ direction: ['left', 'right'].includes(direction) ? 'horizontal' : 'vertical',
4352
+ });
4353
+ return { resizedWidth: displayWidth, resizerHandlers: handlers, isResizing };
4377
4354
  }
4378
4355
 
4379
- 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))}";
4356
+ 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))}";
4380
4357
  styleInject(css_248z$l);
4381
4358
 
4382
4359
  const b$m = block('drawer');
@@ -4387,7 +4364,7 @@ const DrawerItem = React.forwardRef(function DrawerItem(props, ref) {
4387
4364
  const itemRef = React.useRef(null);
4388
4365
  const handleRef = uikit.useForkRef(ref, itemRef);
4389
4366
  const cssDirection = direction === 'left' ? undefined : direction;
4390
- const { resizedWidth, resizerHandlers } = useResizableDrawerItem({
4367
+ const { resizedWidth, resizerHandlers, isResizing } = useResizableDrawerItem({
4391
4368
  direction,
4392
4369
  width,
4393
4370
  minResizeWidth,
@@ -4395,13 +4372,26 @@ const DrawerItem = React.forwardRef(function DrawerItem(props, ref) {
4395
4372
  onResizeStart,
4396
4373
  onResize,
4397
4374
  });
4375
+ const style = {};
4376
+ if (resizable) {
4377
+ if (['left', 'right'].includes(direction)) {
4378
+ style.width = `${resizedWidth}px`;
4379
+ }
4380
+ else {
4381
+ style.height = `${resizedWidth}px`;
4382
+ }
4383
+ }
4398
4384
  React.useEffect(() => {
4399
4385
  setInitialRender(true);
4400
4386
  }, [direction]);
4401
4387
  const resizerElement = resizable ? (React.createElement("div", Object.assign({ className: b$m('resizer', { direction }) }, resizerHandlers),
4402
- React.createElement("div", { className: b$m('resizer-handle') }))) : null;
4388
+ React.createElement("div", { className: b$m('resizer-handle', { direction }) }))) : null;
4403
4389
  return (React.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) },
4404
- React.createElement("div", { ref: handleRef, className: b$m('item', { direction: cssDirection, hidden: isInitialRender && !visible }, [className]), style: { width: resizable ? `${resizedWidth}px` : undefined } },
4390
+ React.createElement("div", { ref: handleRef, className: b$m('item', {
4391
+ direction: cssDirection,
4392
+ hidden: isInitialRender && !visible,
4393
+ resize: isResizing,
4394
+ }, [className]), style: style },
4405
4395
  resizerElement, children !== null && children !== undefined ? children : content)));
4406
4396
  });
4407
4397
  const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEscape, hideVeil, disablePortal = true, keepMounted = false, }) => {
@@ -5415,7 +5405,7 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
5415
5405
  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}";
5416
5406
  styleInject(css_248z$4);
5417
5407
 
5418
- const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-BW_L44zB.js'); }).then((module) => ({ default: module.TopAlert })));
5408
+ const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-C2YRXtzs.js'); }).then((module) => ({ default: module.TopAlert })));
5419
5409
  const b$4 = block('mobile-header');
5420
5410
  const MobileHeader = React.forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, contentClassName, overlapPanel, topAlert, }, ref) => {
5421
5411
  const targetRef = useForwardRef(ref);
@@ -5731,4 +5721,4 @@ exports.styleInject = styleInject;
5731
5721
  exports.useAsideHeaderContext = useAsideHeaderContext;
5732
5722
  exports.useSettingsContext = useSettingsContext;
5733
5723
  exports.useSettingsSelectionContext = useSettingsSelectionContext;
5734
- //# sourceMappingURL=index-DIYCzM4R.js.map
5724
+ //# sourceMappingURL=index-B9MdZ4_0.js.map