@gravity-ui/navigation 2.16.0 → 2.17.0

package/README.md

@@ -13,94 +13,25 @@ npm install @gravity-ui/navigation
 Ensure that peer dependencies are installed in your project
 
 ```bash
-npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/classname@1.6.0 react@^16.0.0
+npm install --dev @gravity-ui/uikit@^6.15.0 @gravity-ui/icons@2.2.0 @gravity-ui/components@3.0.0 @bem-react/classname@1.6.0 react@^18.0.0 react-dom@18.0.0
 ```
 
 ## Components
 
-- AsideHeader
+- [AsideHeader](/src/components/AsideHeader/README.md)
 - MobileHeader
 - FooterItem
 - MobileHeaderFooterItem
-- Drawer
+- [Drawer](/src/components/Drawer/README.md)
 - DrawerItem
 - PageLayout
 - PageLayoutAside
 - AsideFallback
-- Logo
+- [Logo](/src/components/Logo/Readme.md)
 - MobileLogo
 - Footer
 - MobileFooter
 
-## Optimization
-
-If your app content needs to be rendered faster than by passing it throw `AsideHeader` props,
-you may need to switch usage of `AsideHeader` to advanced style with `PageLayout` like this:
-
-```diff
---- Main.tsx
-+++ Main.tsx
--import {AsideHeader} from './AsideHeader'
-+import {PageLayout, AsideFallback} from '@gravity-ui/navigation';
-+const Aside = React.lazy(() =>
-+    import('./Aside').then(({Aside}) => ({ default: Aside }))
-+);
-
--    <AsideHeader renderContent={renderContent} {...restProps} />
-+    <PageLayout>
-+        <Suspense fallback={<AsideFallback />}>
-+           <Aside />
-+        </Suspense>
-+
-+        <PageLayout.Content>
-+            <ContentExample />
-+        </PageLayout.Content>
-+    </PageLayout>
---- Aside.tsx
-+++ Aside.tsx
--import {AsideHeader} from '@gravity-ui/navigation';
-+import {PageLayoutAside} from '@gravity-ui/navigation';
-
-export const Aside: FC = () => {
-    return (
--        <AsideHeader {...props}>
-+        <PageLayoutAside {...props}/>
-    );
-};
-```
-
-## Imports
-
-```ts
-import {AsideHeader} from '@gravity-ui/navigation';
-```
-
 ## CSS variables
 
 Used for themization Navigation's components
-
-### AsideHeader vars
-
-| Name                                                      | Description                                                   |            Default             |
-| :-------------------------------------------------------- | :------------------------------------------------------------ | :----------------------------: |
-| `--gn-aside-header-decoration-collapsed-background-color` | Decoration color for collapsed navigation                     | `--g-color-base-warning-light` |
-| `--gn-aside-header-decoration-expanded-background-color`  | Decoration color for expanded navigation                      | `--g-color-base-warning-light` |
-| `--gn-aside-header-background-color`                      | Navigation background color                                   |  `--g-color-base-background`   |
-| `--gn-aside-header-divider-horizontal-color`              | All horizontal divider line color                             |    `--g-color-line-generic`    |
-| `--gn-aside-header-divider-vertical-color`                | Vertical divider line color between `AsideHeader` and content |    `--g-color-line-generic`    |
-| `--gn-aside-top-panel-height`                             | **Read only**.`AsideHeader` top alert height                  |              0px               |
-| Item                                                      |                                                               |                                |
-| `--gn-aside-header-general-item-icon-color`               | Icon color for Subheader and Footer items                     |    `--g-color-text-primary`    |
-| `--gn-aside-header-item-icon-color`                       | Icon color for CompositeBar items                             |     `--g-color-text-misc`      |
-| `--gn-aside-header-item-text-color`                       |                                                               |    `--g-color-text-primary`    |
-| `--gn-aside-header-item-background-color-hover`           |                                                               | `--g-color-base-simple-hover`  |
-| Current Item                                              |                                                               |                                |
-| `--gn-aside-header-item-current-background-color`         |                                                               |   `--g-color-base-selection`   |
-| `--gn-aside-header-item-current-icon-color`               |                                                               |                                |
-| `--gn-aside-header-item-current-text-color`               |                                                               |    `--g-color-text-primary`    |
-| `--gn-aside-header-item-current-background-color-hover`   |                                                               |                                |
-| z-indexes                                                 |                                                               |                                |
-| `--gn-aside-header-z-index`                               | Aside header z-index                                          |              100               |
-| `--gn-aside-header-panel-z-index`                         | Aside header panel (Drawer component) z-index                 |               98               |
-| `--gn-aside-header-pane-top-z-index`                      | Top pane z-index                                              |               98               |
-| `--gn-aside-header-content-z-index`                       | Content (right part) z-index                                  |               95               |

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-3fd5e2be.js');
+var PageLayoutAside = require('./PageLayoutAside-b7365f95.js');
 require('./Content-64d5738a.js');
 require('./constants-d81c3867.js');
 require('./AsideHeaderContext.js');

package/build/cjs/Drawer.js

@@ -11,7 +11,26 @@ require('@bem-react/classname');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 function _extends() {
@@ -3033,18 +3052,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__namespace.useRef(0);
+    const currentXPosition = React__namespace.useRef(0);
+    const handleMove = React__namespace.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__namespace.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__namespace.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__namespace.useState(false);
+    const [resizeDelta, setResizeDelta] = React__namespace.useState(0);
+    const [internalWidth, setInternalWidth] = React__namespace.useState(width !== null && width !== void 0 ? width : DRAWER_ITEM_INITIAL_RESIZE_WIDTH);
+    const getClampedWidth = React__namespace.useCallback((width) => Math.min(Math.max(width, minResizeWidth), maxResizeWidth), [minResizeWidth, maxResizeWidth]);
+    const getResizedWidth = React__namespace.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__namespace.useCallback(() => {
+        setIsResizing(true);
+        setResizeDelta(0);
+    }, [setIsResizing, setResizeDelta]);
+    const onMove = React__namespace.useCallback((delta) => {
+        setResizeDelta(delta);
+    }, []);
+    const onEnd = React__namespace.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_es.styleInject(css_248z);
 
 const b = cn.block('drawer');
 const TIMEOUT = 300;
-const DrawerItem = ({ visible, content, children, direction = 'left', className, }) => {
+const DrawerItem = React__default["default"].forwardRef(function DrawerItem(props, ref) {
+    const { visible, content, children, direction = 'left', className, resizable, width, minResizeWidth, maxResizeWidth, onResize, } = props;
     const itemRef = React__default["default"].useRef(null);
+    const handleRef = uikit.useForkRef(ref, itemRef);
     const cssDirection = direction === 'left' ? undefined : direction;
+    const { resizedWidth, resizerHandlers } = useResizableDrawerItem({
+        direction,
+        width,
+        minResizeWidth,
+        maxResizeWidth,
+        onResize,
+    });
+    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: 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["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["default"].Children.forEach(children, (child) => {
         if (React__default["default"].isValidElement(child) && child.type === DrawerItem) {
@@ -3070,11 +3180,11 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
     uikit.useBodyScrollLock({ enabled: preventScrollBody && someItemVisible });
     const containerRef = React__default["default"].useRef(null);
     const veilRef = React__default["default"].useRef(null);
-    return (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: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
         const childrenVisible = someItemVisible && state === 'entered';
         return (React__default["default"].createElement("div", { ref: containerRef, className: b(null, className), style: style },
             React__default["default"].createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b('veil-transition'), nodeRef: veilRef },
-                React__default["default"].createElement("div", { ref: veilRef, className: b('veil'), onClick: onVeilClick })),
+                React__default["default"].createElement("div", { ref: veilRef, className: b('veil', { hidden: hideVeil }), onClick: onVeilClick })),
             React__default["default"].Children.map(children, (child) => {
                 if (React__default["default"].isValidElement(child) &&
                     child.type === DrawerItem) {
@@ -3084,6 +3194,10 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
                 return child;
             })));
     }));
+    if (disablePortal) {
+        return drawer;
+    }
+    return React__default["default"].createElement(uikit.Portal, null, drawer);
 };
 
 exports.Drawer = Drawer;