@gravity-ui/navigation 2.16.0 → 2.17.0

package/build/cjs/index.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var AsideHeader = require('./AsideHeader.js');
 var AsideHeaderContext = require('./AsideHeaderContext.js');
-var Drawer = require('./Drawer.js');
 var FooterItem = require('./FooterItem.js');
 var PageLayout = require('./PageLayout.js');
-var PageLayoutAside = require('./PageLayoutAside-3fd5e2be.js');
+var PageLayoutAside = require('./PageLayoutAside-b7365f95.js');
 var AsideFallback = require('./AsideFallback.js');
-var FooterItem$1 = require('./FooterItem-e11d85c6.js');
+var Drawer = require('./Drawer.js');
+var FooterItem$1 = require('./FooterItem-2c6eba14.js');
 var React = require('react');
 var uikit = require('@gravity-ui/uikit');
 var debounce = require('./debounce-8772fd80.js');
@@ -19,15 +19,15 @@ var styleInject_es = require('./style-inject.es-dcee06b6.js');
 var icons = require('@gravity-ui/icons');
 var ActionBar = require('./ActionBar-3c6cdf57.js');
 var Title = require('./Title-54580605.js');
-var HotkeysPanel = require('./HotkeysPanel-c6e4a0d9.js');
+var HotkeysPanel = require('./HotkeysPanel-61ea3f99.js');
 var Settings = require('./Settings-5d2bec1d.js');
-require('react-dom');
 require('./Item-0f90a566.js');
 require('./constants-d81c3867.js');
 require('./Content-64d5738a.js');
 require('./utils-db3e03c2.js');
 require('@gravity-ui/uikit/i18n');
 require('./divider-collapsed-153868e7.js');
+require('react-dom');
 require('@bem-react/classname');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -176,13 +176,13 @@ const MobileFooter = ({ className, menuItems: providedMenuItems, withDivider, mo
 exports.AsideHeader = AsideHeader.AsideHeader;
 exports.AsideHeaderContextProvider = AsideHeaderContext.AsideHeaderContextProvider;
 exports.useAsideHeaderContext = AsideHeaderContext.useAsideHeaderContext;
-exports.Drawer = Drawer.Drawer;
-exports.DrawerItem = Drawer.DrawerItem;
 exports.FooterItem = FooterItem.FooterItem;
 exports.PageLayout = PageLayout.PageLayout;
 exports.Logo = PageLayoutAside.Logo;
 exports.PageLayoutAside = PageLayoutAside.PageLayoutAside;
 exports.AsideFallback = AsideFallback.AsideFallback;
+exports.Drawer = Drawer.Drawer;
+exports.DrawerItem = Drawer.DrawerItem;
 exports.MOBILE_HEADER_EVENT_NAMES = FooterItem$1.MOBILE_HEADER_EVENT_NAMES;
 exports.MobileHeader = FooterItem$1.MobileHeader;
 exports.MobileHeaderFooterItem = FooterItem$1.FooterItem;

package/build/cjs/index4.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var HotkeysPanel = require('./HotkeysPanel-c6e4a0d9.js');
+var HotkeysPanel = require('./HotkeysPanel-61ea3f99.js');
 require('./tslib.es6-705c6589.js');
 require('react');
 require('@gravity-ui/uikit');

package/build/cjs/index6.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FooterItem = require('./FooterItem-e11d85c6.js');
+var FooterItem = require('./FooterItem-2c6eba14.js');
 require('react');
 require('./Content-64d5738a.js');
 require('./Drawer.js');

package/build/esm/AsideHeader.js

@@ -1,7 +1,7 @@
 import { _ as __rest } from './tslib.es6-3cd4e99f.js';
 import React__default from 'react';
 import { PageLayout } from './PageLayout.js';
-import { P as PageLayoutAside } from './PageLayoutAside-1a3b5dcf.js';
+import { P as PageLayoutAside } from './PageLayoutAside-10fd6371.js';
 import './Content-f94ba85d.js';
 import './constants-b1604ff5.js';
 import './AsideHeaderContext.js';

package/build/esm/Drawer.js

@@ -1,5 +1,6 @@
+import * as React from 'react';
 import React__default, { Children, isValidElement, cloneElement } from 'react';
-import { useBodyScrollLock } from '@gravity-ui/uikit';
+import { useForkRef, useBodyScrollLock, Portal } from '@gravity-ui/uikit';
 import ReactDOM from 'react-dom';
 import { b as block } from './cn-ffe5e9f5.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
@@ -3024,18 +3025,109 @@ SwitchTransition.defaultProps = {
   mode: modes.out
 };
 
-var css_248z = ".gn-drawer__item{background-color:var(--g-color-base-background);bottom:0;height:100%;left:0;position:absolute;top:0;will-change:transform}.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{visibility:hidden}.gn-drawer__veil{background-color:var(--g-color-sfx-veil);inset:0;position:absolute}.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}";
+const DRAWER_ITEM_MIN_RESIZE_WIDTH = 200;
+const DRAWER_ITEM_MAX_RESIZE_WIDTH = 800;
+const DRAWER_ITEM_INITIAL_RESIZE_WIDTH = 400;
+function getEventClientX(e) {
+    var _a, _b;
+    return 'touches' in e ? (_b = (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.clientX) !== null && _b !== void 0 ? _b : 0 : e.clientX;
+}
+function useResizeHandlers({ onStart, onMove, onEnd }) {
+    const initialXPosition = React.useRef(0);
+    const currentXPosition = React.useRef(0);
+    const handleMove = React.useCallback((e) => {
+        const currentX = getEventClientX(e);
+        if (currentXPosition.current === currentX) {
+            return;
+        }
+        currentXPosition.current = currentX;
+        const delta = initialXPosition.current - currentX;
+        onMove(delta);
+    }, [onMove]);
+    const handleEnd = React.useCallback((e) => {
+        window.removeEventListener('mousemove', handleMove);
+        window.removeEventListener('touchmove', handleMove);
+        document.body.style.removeProperty('user-select');
+        document.body.style.removeProperty('-webkit-user-select');
+        document.body.style.removeProperty('cursor');
+        const currentX = getEventClientX(e);
+        const delta = initialXPosition.current - currentX;
+        onEnd(delta);
+    }, [handleMove, onEnd]);
+    const handleStart = React.useCallback((e) => {
+        const currentX = getEventClientX(e);
+        initialXPosition.current = currentX;
+        currentXPosition.current = currentX;
+        window.addEventListener('mouseup', handleEnd, { once: true });
+        window.addEventListener('touchend', handleEnd, { once: true });
+        window.addEventListener('touchcancel', handleEnd, { once: true });
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('touchmove', handleMove);
+        document.body.style.setProperty('user-select', 'none');
+        document.body.style.setProperty('-webkit-user-select', 'none');
+        document.body.style.setProperty('cursor', 'col-resize');
+        onStart();
+    }, [handleEnd, handleMove, onStart]);
+    return {
+        onMouseDown: handleStart,
+        onTouchStart: handleStart,
+    };
+}
+function useResizableDrawerItem(params) {
+    const { direction, width, minResizeWidth = DRAWER_ITEM_MIN_RESIZE_WIDTH, maxResizeWidth = DRAWER_ITEM_MAX_RESIZE_WIDTH, onResize, } = params;
+    const [isResizing, setIsResizing] = React.useState(false);
+    const [resizeDelta, setResizeDelta] = React.useState(0);
+    const [internalWidth, setInternalWidth] = React.useState(width !== null && width !== void 0 ? width : DRAWER_ITEM_INITIAL_RESIZE_WIDTH);
+    const getClampedWidth = React.useCallback((width) => Math.min(Math.max(width, minResizeWidth), maxResizeWidth), [minResizeWidth, maxResizeWidth]);
+    const getResizedWidth = React.useCallback((delta) => {
+        const signedDelta = direction === 'right' ? delta : -delta;
+        const newWidth = (width !== null && width !== void 0 ? width : internalWidth) + signedDelta;
+        return getClampedWidth(newWidth);
+    }, [width, internalWidth, direction, getClampedWidth]);
+    const onStart = React.useCallback(() => {
+        setIsResizing(true);
+        setResizeDelta(0);
+    }, [setIsResizing, setResizeDelta]);
+    const onMove = React.useCallback((delta) => {
+        setResizeDelta(delta);
+    }, []);
+    const onEnd = React.useCallback((delta) => {
+        const newWidth = getResizedWidth(delta);
+        setIsResizing(false);
+        setInternalWidth(newWidth);
+        onResize === null || onResize === void 0 ? void 0 : onResize(newWidth);
+    }, [setIsResizing, setInternalWidth, getResizedWidth, onResize]);
+    const displayWidth = isResizing
+        ? getResizedWidth(resizeDelta)
+        : getClampedWidth(width !== null && width !== void 0 ? width : internalWidth);
+    const handlers = useResizeHandlers({ onStart, onMove, onEnd });
+    return { resizedWidth: displayWidth, resizerHandlers: handlers };
+}
+
+var css_248z = ".gn-drawer{--_--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;pointer-events:none}.gn-drawer__item{background-color:var(--g-color-base-background);bottom:0;height:100%;left:0;pointer-events:auto;position:absolute;top:0;will-change:transform}.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{visibility:hidden}.gn-drawer__veil{background-color:var(--g-color-sfx-veil);inset:0;pointer-events:auto;position:absolute}.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))}";
 styleInject(css_248z);
 
 const b = block('drawer');
 const TIMEOUT = 300;
-const DrawerItem = ({ visible, content, children, direction = 'left', className, }) => {
+const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
+    const { visible, content, children, direction = 'left', className, resizable, width, minResizeWidth, maxResizeWidth, onResize, } = props;
     const itemRef = React__default.useRef(null);
+    const handleRef = useForkRef(ref, itemRef);
     const cssDirection = direction === 'left' ? undefined : direction;
+    const { resizedWidth, resizerHandlers } = useResizableDrawerItem({
+        direction,
+        width,
+        minResizeWidth,
+        maxResizeWidth,
+        onResize,
+    });
+    const resizerElement = resizable ? (React__default.createElement("div", Object.assign({ className: b('resizer', { direction }) }, resizerHandlers),
+        React__default.createElement("div", { className: b('resizer-handle') }))) : null;
     return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b('item-transition', { direction: cssDirection }), nodeRef: itemRef },
-        React__default.createElement("div", { ref: itemRef, className: b('item', { direction: cssDirection }, className) }, children !== null && children !== void 0 ? children : content)));
-};
-const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
+        React__default.createElement("div", { ref: handleRef, className: b('item', { direction: cssDirection }, className), style: { width: resizable ? `${resizedWidth}px` : undefined } },
+            resizerElement, children !== null && children !== void 0 ? children : content)));
+});
+const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, hideVeil, disablePortal, }) => {
     let someItemVisible = false;
     React__default.Children.forEach(children, (child) => {
         if (React__default.isValidElement(child) && child.type === DrawerItem) {
@@ -3061,11 +3153,11 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
     useBodyScrollLock({ enabled: preventScrollBody && someItemVisible });
     const containerRef = React__default.useRef(null);
     const veilRef = React__default.useRef(null);
-    return (React__default.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
+    const drawer = (React__default.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
         const childrenVisible = someItemVisible && state === 'entered';
         return (React__default.createElement("div", { ref: containerRef, className: b(null, className), style: style },
             React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b('veil-transition'), nodeRef: veilRef },
-                React__default.createElement("div", { ref: veilRef, className: b('veil'), onClick: onVeilClick })),
+                React__default.createElement("div", { ref: veilRef, className: b('veil', { hidden: hideVeil }), onClick: onVeilClick })),
             React__default.Children.map(children, (child) => {
                 if (React__default.isValidElement(child) &&
                     child.type === DrawerItem) {
@@ -3075,6 +3167,10 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
                 return child;
             })));
     }));
+    if (disablePortal) {
+        return drawer;
+    }
+    return React__default.createElement(Portal, null, drawer);
 };
 
 export { Drawer, DrawerItem };