@gravity-ui/navigation 2.34.0 → 2.34.1

package/build/esm/Drawer.js

@@ -3033,16 +3033,18 @@ function useResizeHandlers({ onStart, onMove, onEnd, direction = 'horizontal', }
         const delta = initialPosition.current - current;
         onMove(delta);
     }, [onMove, direction]);
+    const disableSelect = React.useCallback((e) => {
+        e.preventDefault();
+    }, []);
     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');
+        window.removeEventListener('selectstart', disableSelect);
         document.body.style.removeProperty('cursor');
         const current = getEventClientPosition(e, direction);
         const delta = initialPosition.current - current;
         onEnd(delta);
-    }, [handleMove, onEnd, direction]);
+    }, [handleMove, disableSelect, direction, onEnd]);
     const handleStart = React.useCallback((e) => {
         const current = getEventClientPosition(e, direction);
         initialPosition.current = current;
@@ -3052,9 +3054,9 @@ function useResizeHandlers({ onStart, onMove, onEnd, direction = 'horizontal', }
         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');
+        // Prevents user from selecting text. Similar to `user-select: none` but with no override issue.
+        window.addEventListener('selectstart', disableSelect, { passive: false });
+        document.body.style.setProperty('cursor', direction === 'horizontal' ? 'col-resize' : 'row-resize');
         onStart();
     }, [handleEnd, handleMove, onStart, direction]);
     return {
@@ -3063,7 +3065,7 @@ function useResizeHandlers({ onStart, onMove, onEnd, direction = 'horizontal', }
     };
 }
 function useResizableDrawerItem(params) {
-    const { direction = 'left', 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, onResizeContinue, } = 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);
@@ -3080,7 +3082,8 @@ function useResizableDrawerItem(params) {
     }, [onResizeStart]);
     const onMove = React.useCallback((delta) => {
         setResizeDelta(delta);
-    }, []);
+        onResizeContinue === null || onResizeContinue === void 0 ? void 0 : onResizeContinue(getResizedWidth(delta));
+    }, [getResizedWidth, onResizeContinue]);
     const onEnd = React.useCallback((delta) => {
         const newWidth = getResizedWidth(delta);
         setIsResizing(false);
@@ -3099,13 +3102,13 @@ function useResizableDrawerItem(params) {
     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_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))}";
+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{cursor:row-resize;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');
 const TIMEOUT = 300;
 const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
-    const { visible, content, children, direction = 'left', className, resizable, width, minResizeWidth, maxResizeWidth, onResizeStart, onResize, keepMounted = false, } = props;
+    const { visible, content, children, direction = 'left', className, resizable, width, minResizeWidth, maxResizeWidth, onResizeStart, onResizeContinue, onResize, keepMounted = false, } = props;
     const [isInitialRender, setInitialRender] = React__default.useState(true);
     const itemRef = React__default.useRef(null);
     const handleRef = useForkRef(ref, itemRef);
@@ -3117,6 +3120,7 @@ const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
         maxResizeWidth,
         onResizeStart,
         onResize,
+        onResizeContinue,
     });
     const style = {};
     if (resizable) {