@vkontakte/vkui 5.9.3 → 5.9.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.9.3",
+  "version": "5.9.5",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "main": "dist/cjs/index.js",

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -6,7 +6,11 @@ import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { useDOM } from '../../lib/dom';
 import { TokensClassProvider } from '../../lib/tokensClassProvider';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { addClassNameToElement, removeClassNameFromElement } from '../../lib/utils';
+import {
+  addClassNameToElement,
+  excludeKeysWithUndefined,
+  removeClassNameFromElement,
+} from '../../lib/utils';
 import { warnOnce } from '../../lib/warnOnce';
 import {
   ConfigProviderContext,
@@ -32,7 +36,8 @@ export interface ConfigProviderProps extends Partial<ConfigProviderContextInterf
 /**
  * @see https://vkcom.github.io/VKUI/#/ConfigProvider
  */
-export const ConfigProvider = (props: ConfigProviderProps) => {
+export const ConfigProvider = (propsRaw: ConfigProviderProps) => {
+  const props = excludeKeysWithUndefined(propsRaw);
   const parentConfig = useConfigProvider();
 
   const {

package/src/components/ModalRoot/ModalRoot.tsx

@@ -146,7 +146,10 @@ class ModalRootTouchComponent extends React.Component<
     this.documentScrolling = enabled;
 
     if (enabled) {
-      // Здесь нужен последний аргумент с такими же параметрами, потому что
+      // восстанавливаем значение overscroll behavior
+      // eslint-disable-next-line no-restricted-properties
+      this.document.documentElement.classList.remove('vkui--disable-overscroll-behavior');
+
       // некоторые браузеры на странных вендорах типа Meizu не удаляют обработчик.
       // https://github.com/VKCOM/VKUI/issues/444
       this.window.removeEventListener('touchmove', this.preventTouch, {
@@ -154,6 +157,11 @@ class ModalRootTouchComponent extends React.Component<
         passive: false,
       });
     } else {
+      // отключаем нативный pull-to-refresh при открытом модальном окне
+      // чтобы он не срабатывал при закрытии модалки смахиванием вниз
+      // eslint-disable-next-line no-restricted-properties
+      this.document.documentElement.classList.add('vkui--disable-overscroll-behavior');
+
       this.window.addEventListener('touchmove', this.preventTouch, {
         passive: false,
       });

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -199,6 +199,11 @@ export const PullToRefresh = ({
     }
     setTouchDown(true);
     startYRef.current = e.startY;
+
+    if (document) {
+      // eslint-disable-next-line no-restricted-properties
+      document.documentElement.classList.add('vkui--disable-overscroll-behavior');
+    }
   };
 
   const shouldPreventTouchMove = (event: VKUITouchEvent) => {
@@ -209,7 +214,11 @@ export const PullToRefresh = ({
     /* Нам нужно запретить touchmove у документа как только стало понятно, что
      * начинается pull.
      * состояния watching и refreshing устанавливаются слишком поздно и браузер
-     * может успеть начать нативный pull to refresh. */
+     * может успеть начать нативный pull to refresh.
+     *
+     * Этот код является запасным вариантом, на случай, если css свойство
+     * overscroll-behavior не поддерживается
+     * */
     const shiftY = coordY(event) - startYRef.current;
     const pageYOffset = scroll?.getScroll().y;
     const isRefreshGestureStarted = pageYOffset === 0 && shiftY > 0 && touchDown;
@@ -261,6 +270,12 @@ export const PullToRefresh = ({
   const onTouchEnd = () => {
     setWatching(false);
     setTouchDown(false);
+
+    // восстанавливаем overscroll behavior
+    if (document) {
+      // eslint-disable-next-line no-restricted-properties
+      document.documentElement.classList.remove('vkui--disable-overscroll-behavior');
+    }
   };
 
   const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;

package/src/components/Tappable/Tappable.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import mitt from 'mitt';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
 import { useBooleanState } from '../../hooks/useBooleanState';
 import { useExternRef } from '../../hooks/useExternRef';
@@ -224,9 +223,8 @@ export const Tappable = ({
   const insideTouchRoot = React.useContext(TouchRootContext);
   const platform = usePlatform();
   const { focusVisible, onBlur, onFocus } = useFocusVisible();
-  const { sizeX = 'none' } = useAdaptivity();
+  const { sizeX = 'none', hasHover: hasHoverContext = true } = useAdaptivity();
   const hasPointerContext = useAdaptivityHasPointer();
-  const hasHoverContext = useAdaptivityHasHover();
 
   const [clicks, setClicks] = React.useState<Wave[]>([]);
   const [childHover, setChildHover] = React.useState(false);

package/src/index.ts

@@ -51,6 +51,8 @@ export type {
  */
 export { Button } from './components/Button/Button';
 export type { ButtonProps } from './components/Button/Button';
+export { IconButton } from './components/IconButton/IconButton';
+export type { IconButtonProps } from './components/IconButton/IconButton';
 
 /**
  * Layout
@@ -129,8 +131,6 @@ export { Badge } from './components/Badge/Badge';
 export type { BadgeProps } from './components/Badge/Badge';
 export { ButtonGroup } from './components/ButtonGroup/ButtonGroup';
 export type { ButtonGroupProps } from './components/ButtonGroup/ButtonGroup';
-export { IconButton } from './components/IconButton/IconButton';
-export type { IconButtonProps } from './components/IconButton/IconButton';
 export { Card } from './components/Card/Card';
 export type { CardProps } from './components/Card/Card';
 export { CardGrid } from './components/CardGrid/CardGrid';

package/src/lib/utils.ts

@@ -73,3 +73,19 @@ export function removeClassNameFromElement(element: HTMLElement, classNameToRemo
 
   element.setAttribute('class', classNamesArray.join(' '));
 }
+
+type ExcludeKeysWithUndefined<T> = {
+  [P in keyof T]?: Exclude<T[P], undefined>;
+};
+
+export const excludeKeysWithUndefined = <T extends Record<string | number | symbol, any>>(
+  obj: T,
+): ExcludeKeysWithUndefined<T> => {
+  const filteredObj: ExcludeKeysWithUndefined<T> = {};
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key) && obj[key] !== undefined) {
+      filteredObj[key] = obj[key];
+    }
+  }
+  return filteredObj;
+};

package/src/styles/common.css

@@ -38,3 +38,9 @@
 .vkui--layout-plain {
   background: var(--vkui--color_background_content);
 }
+
+/* отключаем нативный pull-to-refresh при взаимодействии с компонентом
+ * PullToRefresh или при открывании модалки */
+.vkui--disable-overscroll-behavior {
+  overscroll-behavior-y: none;
+}

package/dist/cjs/hooks/useAdaptivityHasHover.d.ts

@@ -1,9 +0,0 @@
-/**
- * Определение происходит с помощью `window.matchMedia`. Для того, чтобы не было ошибок при гидратации, по умолчанию
- * откладываем определение на второй рендер.
- *
- * [No SSR] Если передать `false`, то определение будет сразу.
- */
-export declare function useAdaptivityHasHover(deferDetect?: true): undefined | boolean;
-export declare function useAdaptivityHasHover(deferDetect?: false): boolean;
-//# sourceMappingURL=useAdaptivityHasHover.d.ts.map

package/dist/cjs/hooks/useAdaptivityHasHover.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAdaptivityHasHover.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAdaptivityHasHover.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,WAAW,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC;AAC/E,wBAAgB,qBAAqB,CAAC,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC"}

package/dist/cjs/hooks/useAdaptivityHasHover.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useAdaptivityHasHover", {
-    enumerable: true,
-    get: function() {
-        return useAdaptivityHasHover;
-    }
-});
-var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _vkjs = require("@vkontakte/vkjs");
-var _AdaptivityContext = require("../components/AdaptivityProvider/AdaptivityContext");
-var _useIsClient = require("./useIsClient");
-function useAdaptivityHasHover() {
-    var deferDetect = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
-    var _React_useContext = _react.useContext(_AdaptivityContext.AdaptivityContext), hasHoverContext = _React_useContext.hasHover;
-    var hasHover = hasHoverContext === undefined ? _vkjs.hasHover : hasHoverContext;
-    var needTwoPassRendering = deferDetect || hasHoverContext === undefined;
-    var isClient = (0, _useIsClient.useIsClient)(!needTwoPassRendering);
-    if (!isClient || hasHoverContext !== undefined) {
-        return hasHoverContext;
-    }
-    return hasHover;
-}
-
-//# sourceMappingURL=useAdaptivityHasHover.js.map

package/dist/cjs/hooks/useAdaptivityHasHover.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/hooks/useAdaptivityHasHover.ts"],"sourcesContent":["import * as React from 'react';\nimport { hasHover as hasHoverLib } from '@vkontakte/vkjs';\nimport { AdaptivityContext } from '../components/AdaptivityProvider/AdaptivityContext';\nimport { useIsClient } from './useIsClient';\n\n/**\n * Определение происходит с помощью `window.matchMedia`. Для того, чтобы не было ошибок при гидратации, по умолчанию\n * откладываем определение на второй рендер.\n *\n * [No SSR] Если передать `false`, то определение будет сразу.\n */\nexport function useAdaptivityHasHover(deferDetect?: true): undefined | boolean;\nexport function useAdaptivityHasHover(deferDetect?: false): boolean;\nexport function useAdaptivityHasHover(deferDetect = true): undefined | boolean {\n  const { hasHover: hasHoverContext } = React.useContext(AdaptivityContext);\n  const hasHover = hasHoverContext === undefined ? hasHoverLib : hasHoverContext;\n\n  const needTwoPassRendering = deferDetect || hasHoverContext === undefined;\n\n  const isClient = useIsClient(!needTwoPassRendering);\n  if (!isClient || hasHoverContext !== undefined) {\n    return hasHoverContext;\n  }\n\n  return hasHover;\n}\n"],"names":["useAdaptivityHasHover","deferDetect","React","useContext","AdaptivityContext","hasHover","hasHoverContext","undefined","hasHoverLib","needTwoPassRendering","isClient","useIsClient"],"mappings":";;;;+BAagBA;;;eAAAA;;;;+DAbO;oBACiB;iCACN;2BACN;AAUrB,SAASA;QAAsBC,cAAAA,iEAAc;IAClD,IAAsCC,oBAAAA,OAAMC,UAAU,CAACC,oCAAiB,GAAhEC,AAAUC,kBAAoBJ,kBAA9BG;IACR,IAAMA,WAAWC,oBAAoBC,YAAYC,cAAW,GAAGF;IAE/D,IAAMG,uBAAuBR,eAAeK,oBAAoBC;IAEhE,IAAMG,WAAWC,IAAAA,wBAAW,EAAC,CAACF;IAC9B,IAAI,CAACC,YAAYJ,oBAAoBC,WAAW;QAC9C,OAAOD;IACT;IAEA,OAAOD;AACT"}

package/dist/cssm/hooks/useAdaptivityHasHover.d.ts

@@ -1,9 +0,0 @@
-/**
- * Определение происходит с помощью `window.matchMedia`. Для того, чтобы не было ошибок при гидратации, по умолчанию
- * откладываем определение на второй рендер.
- *
- * [No SSR] Если передать `false`, то определение будет сразу.
- */
-export declare function useAdaptivityHasHover(deferDetect?: true): undefined | boolean;
-export declare function useAdaptivityHasHover(deferDetect?: false): boolean;
-//# sourceMappingURL=useAdaptivityHasHover.d.ts.map

package/dist/cssm/hooks/useAdaptivityHasHover.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAdaptivityHasHover.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAdaptivityHasHover.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,WAAW,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC;AAC/E,wBAAgB,qBAAqB,CAAC,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC"}

package/dist/cssm/hooks/useAdaptivityHasHover.js

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { hasHover as hasHoverLib } from '@vkontakte/vkjs';
-import { AdaptivityContext } from '../components/AdaptivityProvider/AdaptivityContext';
-import { useIsClient } from './useIsClient';
-export function useAdaptivityHasHover(deferDetect = true) {
-    const { hasHover: hasHoverContext } = React.useContext(AdaptivityContext);
-    const hasHover = hasHoverContext === undefined ? hasHoverLib : hasHoverContext;
-    const needTwoPassRendering = deferDetect || hasHoverContext === undefined;
-    const isClient = useIsClient(!needTwoPassRendering);
-    if (!isClient || hasHoverContext !== undefined) {
-        return hasHoverContext;
-    }
-    return hasHover;
-}
-
-//# sourceMappingURL=useAdaptivityHasHover.js.map

package/dist/cssm/hooks/useAdaptivityHasHover.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/hooks/useAdaptivityHasHover.ts"],"sourcesContent":["import * as React from 'react';\nimport { hasHover as hasHoverLib } from '@vkontakte/vkjs';\nimport { AdaptivityContext } from '../components/AdaptivityProvider/AdaptivityContext';\nimport { useIsClient } from './useIsClient';\n\n/**\n * Определение происходит с помощью `window.matchMedia`. Для того, чтобы не было ошибок при гидратации, по умолчанию\n * откладываем определение на второй рендер.\n *\n * [No SSR] Если передать `false`, то определение будет сразу.\n */\nexport function useAdaptivityHasHover(deferDetect?: true): undefined | boolean;\nexport function useAdaptivityHasHover(deferDetect?: false): boolean;\nexport function useAdaptivityHasHover(deferDetect = true): undefined | boolean {\n  const { hasHover: hasHoverContext } = React.useContext(AdaptivityContext);\n  const hasHover = hasHoverContext === undefined ? hasHoverLib : hasHoverContext;\n\n  const needTwoPassRendering = deferDetect || hasHoverContext === undefined;\n\n  const isClient = useIsClient(!needTwoPassRendering);\n  if (!isClient || hasHoverContext !== undefined) {\n    return hasHoverContext;\n  }\n\n  return hasHover;\n}\n"],"names":["React","hasHover","hasHoverLib","AdaptivityContext","useIsClient","useAdaptivityHasHover","deferDetect","hasHoverContext","useContext","undefined","needTwoPassRendering","isClient"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAYC,WAAW,QAAQ,kBAAkB;AAC1D,SAASC,iBAAiB,QAAQ,qDAAqD;AACvF,SAASC,WAAW,QAAQ,gBAAgB;AAU5C,OAAO,SAASC,sBAAsBC,cAAc,IAAI;IACtD,MAAM,EAAEL,UAAUM,eAAe,EAAE,GAAGP,MAAMQ,UAAU,CAACL;IACvD,MAAMF,WAAWM,oBAAoBE,YAAYP,cAAcK;IAE/D,MAAMG,uBAAuBJ,eAAeC,oBAAoBE;IAEhE,MAAME,WAAWP,YAAY,CAACM;IAC9B,IAAI,CAACC,YAAYJ,oBAAoBE,WAAW;QAC9C,OAAOF;IACT;IAEA,OAAON;AACT"}

package/dist/hooks/useAdaptivityHasHover.d.ts

@@ -1,9 +0,0 @@
-/**
- * Определение происходит с помощью `window.matchMedia`. Для того, чтобы не было ошибок при гидратации, по умолчанию
- * откладываем определение на второй рендер.
- *
- * [No SSR] Если передать `false`, то определение будет сразу.
- */
-export declare function useAdaptivityHasHover(deferDetect?: true): undefined | boolean;
-export declare function useAdaptivityHasHover(deferDetect?: false): boolean;
-//# sourceMappingURL=useAdaptivityHasHover.d.ts.map

package/dist/hooks/useAdaptivityHasHover.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAdaptivityHasHover.d.ts","sourceRoot":"","sources":["../../src/hooks/useAdaptivityHasHover.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,WAAW,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC;AAC/E,wBAAgB,qBAAqB,CAAC,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC"}

package/dist/hooks/useAdaptivityHasHover.js

@@ -1,17 +0,0 @@
-import * as React from "react";
-import { hasHover as hasHoverLib } from "@vkontakte/vkjs";
-import { AdaptivityContext } from "../components/AdaptivityProvider/AdaptivityContext";
-import { useIsClient } from "./useIsClient";
-export function useAdaptivityHasHover() {
-    var deferDetect = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
-    var _React_useContext = React.useContext(AdaptivityContext), hasHoverContext = _React_useContext.hasHover;
-    var hasHover = hasHoverContext === undefined ? hasHoverLib : hasHoverContext;
-    var needTwoPassRendering = deferDetect || hasHoverContext === undefined;
-    var isClient = useIsClient(!needTwoPassRendering);
-    if (!isClient || hasHoverContext !== undefined) {
-        return hasHoverContext;
-    }
-    return hasHover;
-}
-
-//# sourceMappingURL=useAdaptivityHasHover.js.map

package/dist/hooks/useAdaptivityHasHover.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/hooks/useAdaptivityHasHover.ts"],"sourcesContent":["import * as React from 'react';\nimport { hasHover as hasHoverLib } from '@vkontakte/vkjs';\nimport { AdaptivityContext } from '../components/AdaptivityProvider/AdaptivityContext';\nimport { useIsClient } from './useIsClient';\n\n/**\n * Определение происходит с помощью `window.matchMedia`. Для того, чтобы не было ошибок при гидратации, по умолчанию\n * откладываем определение на второй рендер.\n *\n * [No SSR] Если передать `false`, то определение будет сразу.\n */\nexport function useAdaptivityHasHover(deferDetect?: true): undefined | boolean;\nexport function useAdaptivityHasHover(deferDetect?: false): boolean;\nexport function useAdaptivityHasHover(deferDetect = true): undefined | boolean {\n  const { hasHover: hasHoverContext } = React.useContext(AdaptivityContext);\n  const hasHover = hasHoverContext === undefined ? hasHoverLib : hasHoverContext;\n\n  const needTwoPassRendering = deferDetect || hasHoverContext === undefined;\n\n  const isClient = useIsClient(!needTwoPassRendering);\n  if (!isClient || hasHoverContext !== undefined) {\n    return hasHoverContext;\n  }\n\n  return hasHover;\n}\n"],"names":["React","hasHover","hasHoverLib","AdaptivityContext","useIsClient","useAdaptivityHasHover","deferDetect","useContext","hasHoverContext","undefined","needTwoPassRendering","isClient"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAYC,WAAW,QAAQ,kBAAkB;AAC1D,SAASC,iBAAiB,QAAQ,qDAAqD;AACvF,SAASC,WAAW,QAAQ,gBAAgB;AAU5C,OAAO,SAASC;QAAsBC,cAAAA,iEAAc;IAClD,IAAsCN,oBAAAA,MAAMO,UAAU,CAACJ,oBAA/CF,AAAUO,kBAAoBR,kBAA9BC;IACR,IAAMA,WAAWO,oBAAoBC,YAAYP,cAAcM;IAE/D,IAAME,uBAAuBJ,eAAeE,oBAAoBC;IAEhE,IAAME,WAAWP,YAAY,CAACM;IAC9B,IAAI,CAACC,YAAYH,oBAAoBC,WAAW;QAC9C,OAAOD;IACT;IAEA,OAAOP;AACT"}

package/src/hooks/useAdaptivityHasHover.ts

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { hasHover as hasHoverLib } from '@vkontakte/vkjs';
-import { AdaptivityContext } from '../components/AdaptivityProvider/AdaptivityContext';
-import { useIsClient } from './useIsClient';
-
-/**
- * Определение происходит с помощью `window.matchMedia`. Для того, чтобы не было ошибок при гидратации, по умолчанию
- * откладываем определение на второй рендер.
- *
- * [No SSR] Если передать `false`, то определение будет сразу.
- */
-export function useAdaptivityHasHover(deferDetect?: true): undefined | boolean;
-export function useAdaptivityHasHover(deferDetect?: false): boolean;
-export function useAdaptivityHasHover(deferDetect = true): undefined | boolean {
-  const { hasHover: hasHoverContext } = React.useContext(AdaptivityContext);
-  const hasHover = hasHoverContext === undefined ? hasHoverLib : hasHoverContext;
-
-  const needTwoPassRendering = deferDetect || hasHoverContext === undefined;
-
-  const isClient = useIsClient(!needTwoPassRendering);
-  if (!isClient || hasHoverContext !== undefined) {
-    return hasHoverContext;
-  }
-
-  return hasHover;
-}