@gravity-ui/navigation 2.32.0 → 2.33.0

package/build/esm/Drawer.js

@@ -3088,7 +3088,7 @@ function useResizableDrawerItem(params) {
         ? getResizedWidth(resizeDelta)
         : getClampedWidth(width !== null && width !== void 0 ? width : internalWidth);
     const handlers = useResizeHandlers({ onStart, onMove, onEnd });
-    return { resizedWidth: displayWidth, resizerHandlers: handlers };
+    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))}";
@@ -3102,7 +3102,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,
@@ -3116,7 +3116,11 @@ const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
     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, 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: { width: resizable ? `${resizedWidth}px` : undefined } },
             resizerElement, children !== null && children !== void 0 ? children : content)));
 });
 const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEscape, preventScrollBody = true, hideVeil, disablePortal = true, keepMounted = false, }) => {