@gravity-ui/navigation 2.25.0 → 2.27.0

package/build/cjs/AsideHeader.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('./tslib.es6-705c6589.js');
 var React = require('react');
 var PageLayout = require('./PageLayout.js');
-var PageLayoutAside = require('./PageLayoutAside-e729d911.js');
+var PageLayoutAside = require('./PageLayoutAside-ace87c16.js');
 require('./Content-64d5738a.js');
 require('./constants-d81c3867.js');
 require('./AsideHeaderContext.js');
@@ -16,7 +16,7 @@ require('./style-inject.es-dcee06b6.js');
 require('@gravity-ui/uikit');
 require('@gravity-ui/icons');
 require('@gravity-ui/uikit/i18n');
-require('./Item-7c1b54f5.js');
+require('./Item-122f7db4.js');
 require('./debounce-8772fd80.js');
 require('./divider-collapsed-b743122e.js');
 require('./Drawer.js');

package/build/cjs/Drawer.js

@@ -3117,13 +3117,14 @@ function useResizableDrawerItem(params) {
     return { resizedWidth: displayWidth, resizerHandlers: handlers };
 }
 
-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{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-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))}";
 styleInject_es.styleInject(css_248z);
 
 const b = cn.block('drawer');
 const TIMEOUT = 300;
 const DrawerItem = React__default["default"].forwardRef(function DrawerItem(props, ref) {
-    const { visible, content, children, direction = 'left', className, resizable, width, minResizeWidth, maxResizeWidth, onResize, } = props;
+    const { visible, content, children, direction = 'left', className, resizable, width, minResizeWidth, maxResizeWidth, onResize, keepMounted = false, } = props;
+    const [isInitialRender, setInitialRender] = React__default["default"].useState(true);
     const itemRef = React__default["default"].useRef(null);
     const handleRef = uikit.useForkRef(ref, itemRef);
     const cssDirection = direction === 'left' ? undefined : direction;
@@ -3134,13 +3135,16 @@ const DrawerItem = React__default["default"].forwardRef(function DrawerItem(prop
         maxResizeWidth,
         onResize,
     });
+    React__default["default"].useEffect(() => {
+        setInitialRender(true);
+    }, [direction]);
     const resizerElement = resizable ? (React__default["default"].createElement("div", Object.assign({ className: b('resizer', { direction }) }, resizerHandlers),
         React__default["default"].createElement("div", { className: b('resizer-handle') }))) : null;
-    return (React__default["default"].createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b('item-transition', { direction: cssDirection }), nodeRef: itemRef },
-        React__default["default"].createElement("div", { ref: handleRef, className: b('item', { direction: cssDirection }, className), style: { width: resizable ? `${resizedWidth}px` : undefined } },
+    return (React__default["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["default"].createElement("div", { ref: handleRef, className: b('item', { direction: cssDirection, hidden: isInitialRender && !visible }, [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, }) => {
+const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEscape, preventScrollBody = true, hideVeil, disablePortal = true, keepMounted = false, }) => {
     let someItemVisible = false;
     React__default["default"].Children.forEach(children, (child) => {
         if (React__default["default"].isValidElement(child) && child.type === DrawerItem) {
@@ -3166,7 +3170,7 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
     uikit.useBodyScrollLock({ enabled: preventScrollBody && someItemVisible });
     const containerRef = React__default["default"].useRef(null);
     const veilRef = React__default["default"].useRef(null);
-    const drawer = (React__default["default"].createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
+    const drawer = (React__default["default"].createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, nodeRef: containerRef }, (state) => {
         const childrenVisible = someItemVisible && state === 'entered';
         return (React__default["default"].createElement("div", { ref: containerRef, className: b({ hideVeil }, className), style: style },
             React__default["default"].createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b('veil-transition'), nodeRef: veilRef },
@@ -3175,7 +3179,7 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
                 if (React__default["default"].isValidElement(child) &&
                     child.type === DrawerItem) {
                     const childVisible = Boolean(child.props.visible);
-                    return React__default["default"].cloneElement(child, Object.assign(Object.assign({}, child.props), { visible: childVisible && childrenVisible }));
+                    return React__default["default"].cloneElement(child, Object.assign(Object.assign({ keepMounted }, child.props), { visible: childVisible && childrenVisible }));
                 }
                 return child;
             })));