@gravity-ui/navigation 2.32.0 → 2.34.0

package/build/esm/Drawer.js

@@ -3014,36 +3014,39 @@ SwitchTransition.defaultProps = {
 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 getEventClientPosition(e, direction) {
+    var _a, _b, _c, _d;
+    if ('touches' in e) {
+        return direction === 'horizontal' ? (_b = (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.clientX) !== null && _b !== void 0 ? _b : 0 : (_d = (_c = e.touches[0]) === null || _c === void 0 ? void 0 : _c.clientY) !== null && _d !== void 0 ? _d : 0;
+    }
+    return direction === 'horizontal' ? e.clientX : e.clientY;
 }
-function useResizeHandlers({ onStart, onMove, onEnd }) {
-    const initialXPosition = React.useRef(0);
-    const currentXPosition = React.useRef(0);
+function useResizeHandlers({ onStart, onMove, onEnd, direction = 'horizontal', }) {
+    const initialPosition = React.useRef(0);
+    const currentPosition = React.useRef(0);
     const handleMove = React.useCallback((e) => {
-        const currentX = getEventClientX(e);
-        if (currentXPosition.current === currentX) {
+        const current = getEventClientPosition(e, direction);
+        if (currentPosition.current === current) {
             return;
         }
-        currentXPosition.current = currentX;
-        const delta = initialXPosition.current - currentX;
+        currentPosition.current = current;
+        const delta = initialPosition.current - current;
         onMove(delta);
-    }, [onMove]);
+    }, [onMove, direction]);
     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;
+        const current = getEventClientPosition(e, direction);
+        const delta = initialPosition.current - current;
         onEnd(delta);
-    }, [handleMove, onEnd]);
+    }, [handleMove, onEnd, direction]);
     const handleStart = React.useCallback((e) => {
-        const currentX = getEventClientX(e);
-        initialXPosition.current = currentX;
-        currentXPosition.current = currentX;
+        const current = getEventClientPosition(e, direction);
+        initialPosition.current = current;
+        currentPosition.current = current;
         window.addEventListener('mouseup', handleEnd, { once: true });
         window.addEventListener('touchend', handleEnd, { once: true });
         window.addEventListener('touchcancel', handleEnd, { once: true });
@@ -3053,20 +3056,20 @@ function useResizeHandlers({ onStart, onMove, onEnd }) {
         document.body.style.setProperty('-webkit-user-select', 'none');
         document.body.style.setProperty('cursor', 'col-resize');
         onStart();
-    }, [handleEnd, handleMove, onStart]);
+    }, [handleEnd, handleMove, onStart, direction]);
     return {
         onMouseDown: handleStart,
         onTouchStart: handleStart,
     };
 }
 function useResizableDrawerItem(params) {
-    const { direction, width, minResizeWidth = DRAWER_ITEM_MIN_RESIZE_WIDTH, maxResizeWidth = DRAWER_ITEM_MAX_RESIZE_WIDTH, onResizeStart, onResize, } = params;
+    const { direction = 'left', width, minResizeWidth = DRAWER_ITEM_MIN_RESIZE_WIDTH, maxResizeWidth = DRAWER_ITEM_MAX_RESIZE_WIDTH, onResizeStart, 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 signedDelta = ['right', 'bottom'].includes(direction) ? delta : -delta;
         const newWidth = (width !== null && width !== void 0 ? width : internalWidth) + signedDelta;
         return getClampedWidth(newWidth);
     }, [width, internalWidth, direction, getClampedWidth]);
@@ -3087,11 +3090,16 @@ function useResizableDrawerItem(params) {
     const displayWidth = isResizing
         ? getResizedWidth(resizeDelta)
         : getClampedWidth(width !== null && width !== void 0 ? width : internalWidth);
-    const handlers = useResizeHandlers({ onStart, onMove, onEnd });
-    return { resizedWidth: displayWidth, resizerHandlers: handlers };
+    const handlers = useResizeHandlers({
+        onStart,
+        onMove,
+        onEnd,
+        direction: ['left', 'right'].includes(direction) ? 'horizontal' : 'vertical',
+    });
+    return { resizedWidth: displayWidth, resizerHandlers: handlers, isResizing };
 }
 
-var css_248z = ".gn-drawer{--_--item-shadow-default:0 1px 5px 0 var(--g-color-sfx-shadow);--_--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:0;pointer-events:auto;position:absolute;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))}";
+var css_248z = ".gn-drawer{--_--item-shadow-default:0 1px 5px 0 var(--g-color-sfx-shadow);--_--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:0;pointer-events:auto;position:absolute;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))}";
 styleInject(css_248z);
 
 const b = block('drawer');
@@ -3102,7 +3110,7 @@ const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
     const itemRef = React__default.useRef(null);
     const handleRef = useForkRef(ref, itemRef);
     const cssDirection = direction === 'left' ? undefined : direction;
-    const { resizedWidth, resizerHandlers } = useResizableDrawerItem({
+    const { resizedWidth, resizerHandlers, isResizing } = useResizableDrawerItem({
         direction,
         width,
         minResizeWidth,
@@ -3110,13 +3118,26 @@ const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
         onResizeStart,
         onResize,
     });
+    const style = {};
+    if (resizable) {
+        if (['left', 'right'].includes(direction)) {
+            style.width = `${resizedWidth}px`;
+        }
+        else {
+            style.height = `${resizedWidth}px`;
+        }
+    }
     React__default.useEffect(() => {
         setInitialRender(true);
     }, [direction]);
     const resizerElement = resizable ? (React__default.createElement("div", Object.assign({ className: b('resizer', { direction }) }, resizerHandlers),
-        React__default.createElement("div", { className: b('resizer-handle') }))) : null;
+        React__default.createElement("div", { className: b('resizer-handle', { direction }) }))) : null;
     return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, classNames: b('item-transition', { direction: cssDirection }), nodeRef: itemRef, onEnter: () => setInitialRender(false), onExit: () => setInitialRender(false) },
-        React__default.createElement("div", { ref: handleRef, className: b('item', { direction: cssDirection, hidden: isInitialRender && !visible }, [className]), style: { width: resizable ? `${resizedWidth}px` : undefined } },
+        React__default.createElement("div", { ref: handleRef, className: b('item', {
+                direction: cssDirection,
+                hidden: isInitialRender && !visible,
+                resize: isResizing,
+            }, [className]), style: style },
             resizerElement, children !== null && children !== void 0 ? children : content)));
 });
 const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEscape, preventScrollBody = true, hideVeil, disablePortal = true, keepMounted = false, }) => {