@vkontakte/vkui 7.0.0-dev-efd91c.0 → 7.0.0-dev-efd91c.2

package/src/lib/dom.tsx

@@ -4,10 +4,12 @@ import * as React from 'react';
 import { canUseDOM } from '@vkontakte/vkjs';
 import { rectToClientRect } from '@vkontakte/vkui-floating-ui/core';
 import {
-  getNearestOverflowAncestor as getNearestOverflowAncestorLib,
+  getParentNode,
   getWindow,
   isElement,
   isHTMLElement,
+  isLastTraversableNode,
+  isOverflowElement,
 } from '@vkontakte/vkui-floating-ui/utils/dom';
 
 export {
@@ -15,6 +17,7 @@ export {
   getNodeScroll,
   isHTMLElement,
   isElement,
+  getParentNode,
 } from '@vkontakte/vkui-floating-ui/utils/dom';
 
 export { canUseDOM, canUseEventListeners, onDOMLoaded } from '@vkontakte/vkjs';
@@ -32,7 +35,7 @@ export interface DOMContextInterface {
 export type DOMProps = DOMContextInterface;
 
 /* eslint-disable no-restricted-globals */
-export const getDOM = (): DOMContextInterface => ({
+const getDOM = (): DOMContextInterface => ({
   window: canUseDOM ? window : undefined,
   document: canUseDOM ? document : undefined,
 });
@@ -147,19 +150,32 @@ export const getRelativeBoundingClientRect = (parent: Element, child: Element) =
 };
 
 /**
- * Адаптер над getNearestOverflowAncestor из @floating-ui/utils/dom.
+ * Переписанный `getNearestOverflowAncestor` из @floating-ui/utils/dom.
  *
- * document.body подменяем на window, т.к. на document.body нельзя применить скролл.
+ * [1] добавляем ноду, на которой нужно остановить рекурсию
+ * [2] document.body подменяем на window, т.к. на document.body нельзя применить скролл.
+ *
+ * @link https://github.com/floating-ui/floating-ui/blob/%40floating-ui/dom%401.6.3/packages/utils/src/dom.ts#L143
  */
-export const getNearestOverflowAncestor = (childEl: Node): HTMLElement | Window | null => {
-  const foundAncestor = getNearestOverflowAncestorLib(childEl);
-
-  return isBody(foundAncestor)
-    ? getWindow(foundAncestor)
-    : isHTMLElement(childEl)
-      ? foundAncestor
-      : null;
-};
+export function getNearestOverflowAncestor(node: Node): HTMLElement | Window | null;
+export function getNearestOverflowAncestor(node: Node, terminalNode: Node): HTMLElement | null;
+export function getNearestOverflowAncestor(node: Node, terminalNode?: any): any {
+  const parentNode = getParentNode(node);
+
+  if (terminalNode === parentNode) {
+    return null; /* [1] */
+  }
+
+  if (isLastTraversableNode(parentNode)) {
+    return getWindow(parentNode); /* [2] */
+  }
+
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+
+  return getNearestOverflowAncestor(parentNode, terminalNode);
+}
 
 export const getScrollHeight = (node: Element | Window): number => {
   return isWindow(node) ? node.document.documentElement.scrollHeight : node.scrollHeight;
@@ -260,3 +276,59 @@ export const initializeBrowserGesturePreventionEffect = (window: Window): VoidFu
     window.removeEventListener('touchmove', handleWindowTouchMove, options);
   };
 };
+
+const nonTextInputTypes = { button: true, submit: true, reset: true, color: true, file: true, image: true, checkbox: true, radio: true }; // prettier-ignore
+
+export const isHTMLContentEditableElement = (
+  el: Element | null,
+): el is HTMLInputElement | HTMLTextAreaElement | HTMLElement => {
+  if (el === null) {
+    return false;
+  }
+
+  if (el.tagName === 'INPUT') {
+    // @ts-expect-error: TS2339 за счёт `tagName` удовлетворяемся, что это `HTMLInputElement`
+    return !nonTextInputTypes[el.type]; // prettier-ignore
+  }
+
+  return (
+    el.tagName === 'TEXTAREA' ||
+    // eslint-disable-next-line no-restricted-properties
+    el.closest('[contenteditable=true]') !== null
+  );
+};
+
+export type VisualViewport = {
+  offsetTop: number;
+  offsetLeft: number;
+  width: number;
+  height: number;
+};
+
+/**
+ * Фоллбек `visualViewport` для **Safari 12**.
+ */
+export function getVisualViewport(win: Window): VisualViewport {
+  const result: VisualViewport = { offsetTop: 0, offsetLeft: 0, width: 0, height: 0 };
+  if (win.visualViewport) {
+    const { offsetTop, offsetLeft, width, height } = win.visualViewport;
+    result.offsetTop = Math.round(offsetTop);
+    result.offsetLeft = offsetLeft;
+    result.width = width;
+    result.height = Math.round(height);
+
+    return result;
+  }
+
+  // TODO[Safari@>=13] Удалить фоллбек
+  result.offsetTop = win.pageYOffset;
+  result.offsetLeft = win.pageXOffset;
+  result.width = win.innerWidth; // note: вызывает reflow в отличии от visualViewport
+  result.height = win.innerHeight; // note: вызывает reflow в отличии от visualViewport
+  return result;
+}
+
+export const hasSelectionWithRangeType = (node: unknown) => {
+  const selection = getWindow(node).getSelection();
+  return selection ? selection.type === 'Range' : false;
+};

package/src/lib/floating/usePlacementChangeCallback.ts

@@ -1,4 +1,4 @@
-import { usePrevious } from '../../hooks/usePrevious';
+import * as React from 'react';
 import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
 import type { OnPlacementChange, Placement, PlacementWithAuto } from './types/common';
 
@@ -7,12 +7,18 @@ export function usePlacementChangeCallback(
   resolvedPlacement: Placement,
   onPlacementChange: OnPlacementChange | undefined,
 ): void {
-  const prevPlacement = usePrevious(resolvedPlacement);
+  const prevPlacementRef = React.useRef<Placement | undefined>(undefined);
+  React.useEffect(() => {
+    prevPlacementRef.current = resolvedPlacement;
+  });
 
   useIsomorphicLayoutEffect(() => {
     if (!onPlacementChange) {
       return;
     }
+
+    const prevPlacement = prevPlacementRef.current;
+
     const isInitialPlacementChanged =
       prevPlacement === undefined && initialPlacement !== resolvedPlacement;
     const isResolvedPlacementChanged =
@@ -20,5 +26,5 @@ export function usePlacementChangeCallback(
     if (isInitialPlacementChanged || isResolvedPlacementChanged) {
       onPlacementChange(resolvedPlacement);
     }
-  }, [prevPlacement, initialPlacement, resolvedPlacement, onPlacementChange]);
+  }, [initialPlacement, resolvedPlacement, onPlacementChange]);
 }

package/src/lib/sheet/constants.ts

@@ -0,0 +1,32 @@
+/** @public */
+export const BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY = 'data-vkui-block-sheet-behavior';
+
+/** @public */
+export const BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE = {
+  [BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY]: true,
+};
+
+/** @private */
+export const DRAG_THRESHOLDS = {
+  DISTANCE_FOR_MOVING_START: 12 as const,
+  VELOCITY: 500 as const,
+};
+
+/** @private */
+export const SNAP_POINT_SAFE_RANGE = {
+  LOWER: 25 as const,
+  HIGHEST: 90 as const,
+};
+
+/** @private */
+export const SNAP_POINT_DETENTS = {
+  MIN: 0 as const,
+  MEDIUM: 50 as const,
+  LARGE: 100 as const,
+};
+
+/** @private */
+export const DYNAMIC_SNAP_POINT_DATA = {
+  IDLE_POINT_VALUE: 0 as const,
+  COMPUTED_INDEX: 1 as const,
+};

package/src/lib/sheet/controllers/BottomSheetController.ts

@@ -0,0 +1,382 @@
+import { noop } from '@vkontakte/vkjs';
+import { clamp } from '../../../helpers/math';
+import { inRange } from '../../../helpers/range';
+import { rubberbandIfOutOfBounds } from '../../animation';
+import { getNearestOverflowAncestor, hasSelectionWithRangeType } from '../../dom';
+import { UIPanGestureRecognizer } from '../../touch/UIPanGestureRecognizer';
+import {
+  BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY,
+  DRAG_THRESHOLDS,
+  DYNAMIC_SNAP_POINT_DATA,
+  SNAP_POINT_DETENTS,
+  SNAP_POINT_SAFE_RANGE,
+} from '../constants';
+import type { CSSTransitionController } from './CSSTransitionController';
+
+export type InitialSnapPoint = 'auto' | number;
+
+export type SnapPointDetents = [number, number] | [number, number, number];
+
+export type BottomSheetControllerSnapPointData = {
+  unit: '%' | 'px';
+  currentSnapPoint: number;
+  snapPointDetents: SnapPointDetents;
+};
+
+export type BottomSheetControllerOptions = {
+  sheetScrollEl: HTMLElement | null;
+  sheetTransitionController: CSSTransitionController<string>;
+  backdropTransitionController: CSSTransitionController | null;
+  onDismiss: VoidFunction;
+};
+
+export class BottomSheetController {
+  static parseInitialSnapPoint(
+    initialSnapPoint: InitialSnapPoint = SNAP_POINT_DETENTS.MEDIUM,
+  ): BottomSheetControllerSnapPointData {
+    if (initialSnapPoint === 'auto') {
+      return {
+        unit: 'px',
+        currentSnapPoint: DYNAMIC_SNAP_POINT_DATA.IDLE_POINT_VALUE,
+        snapPointDetents: [SNAP_POINT_DETENTS.MIN, DYNAMIC_SNAP_POINT_DATA.IDLE_POINT_VALUE],
+      };
+    }
+
+    const currentSnapPoint = Math.min(
+      Math.max(initialSnapPoint, SNAP_POINT_SAFE_RANGE.LOWER),
+      SNAP_POINT_DETENTS.LARGE,
+    );
+
+    return {
+      unit: '%',
+      currentSnapPoint,
+      snapPointDetents: inRange(
+        currentSnapPoint,
+        SNAP_POINT_SAFE_RANGE.LOWER,
+        SNAP_POINT_SAFE_RANGE.HIGHEST,
+      )
+        ? [SNAP_POINT_DETENTS.MIN, currentSnapPoint, SNAP_POINT_DETENTS.LARGE]
+        : [SNAP_POINT_DETENTS.MIN, currentSnapPoint],
+    };
+  }
+
+  constructor(
+    private readonly sheetEl: HTMLElement,
+    {
+      sheetScrollEl,
+      sheetTransitionController,
+      backdropTransitionController,
+      onDismiss,
+    }: BottomSheetControllerOptions,
+  ) {
+    this.onDismiss = onDismiss;
+    this.panGestureRecognizer = new UIPanGestureRecognizer();
+    this.sheetScrollEl = sheetScrollEl;
+    this.sheetTransitionController = sheetTransitionController;
+    this.backdropTransitionController = backdropTransitionController;
+  }
+
+  init(initialSnapPoint?: InitialSnapPoint) {
+    this.isInitialized = true;
+
+    const { unit, currentSnapPoint, snapPointDetents } =
+      BottomSheetController.parseInitialSnapPoint(initialSnapPoint);
+
+    this.unit = unit;
+    this.currentSnapPoint = currentSnapPoint;
+    this.snapPointDetents = snapPointDetents;
+  }
+
+  destroy() {
+    this.isInitialized = false;
+    this.pannedEl = null;
+    this.sheetTransitionController.cleanup();
+    this.backdropTransitionController?.cleanup();
+
+    this.disableVerticalScrollBouncingDispose();
+    this.disableVerticalScrollBouncingDispose = noop;
+  }
+
+  panStart(event: UIEvent) {
+    if (
+      !this.isInitialized ||
+      this.panState !== 'idle' ||
+      hasSelectionWithRangeType(event.target)
+    ) {
+      return;
+    }
+
+    this.panState = 'start';
+    this.pannedEl = event.target as HTMLElement;
+    this.panGestureRecognizer.setStartCoords(event);
+  }
+
+  panMove(event: UIEvent) {
+    switch (this.panState) {
+      case 'start':
+        this.panGestureRecognizer.setInitialTimeOnce();
+        this.panGestureRecognizer.setEndCoords(event);
+
+        if (this.preventUntilPanGestureBecomesExpected()) {
+          return;
+        }
+
+        if (this.preventImmediatelyIfPannedElIsNotValid()) {
+          this.panState = 'idle';
+          return;
+        }
+
+        if (this.preventUntilVerticalScrollingOnSheetScrollElBecomesExpected()) {
+          return;
+        }
+
+        if (this.preventImmediatelyIfVerticalScrollingOnPannedElIsScrolled()) {
+          this.panState = 'idle';
+          return;
+        }
+
+        this.panState = 'moving';
+        this.panGestureRecognizer.setStartCoords(event);
+
+        this.sheetHeight = this.sheetEl.offsetHeight;
+
+        this.disableVerticalScrollBouncingDispose =
+          BottomSheetController.disableVerticalScrollBouncingIfNeeded(
+            this.sheetScrollEl,
+            this.pannedEl,
+          );
+
+        if (this.isDynamicSnapPoint) {
+          this.currentSnapPoint = this.sheetHeight;
+          this.snapPointDetents[DYNAMIC_SNAP_POINT_DATA.COMPUTED_INDEX] = this.sheetHeight;
+        }
+        break;
+      case 'moving':
+        if (event.cancelable) {
+          event.preventDefault();
+        }
+
+        this.panGestureRecognizer.setEndCoords(event);
+
+        const { y1, y2 } = this.panGestureRecognizer;
+
+        this.nextSnapPoint = rubberbandIfOutOfBounds(
+          this.currentSnapPoint - ((y2 - y1) / this.sheetHeight) * this.currentSnapPoint,
+          SNAP_POINT_DETENTS.MIN,
+          this.isDynamicSnapPoint ? this.sheetHeight : SNAP_POINT_DETENTS.LARGE,
+        );
+
+        this.calculateSnapPoint(this.nextSnapPoint, true);
+        break;
+    }
+  }
+
+  panEnd() {
+    switch (this.panState) {
+      case 'moving':
+        this.currentSnapPoint = this.getSnapPointTo(this.nextSnapPoint);
+        this.calculateSnapPoint(this.currentSnapPoint);
+        break;
+    }
+
+    this.panState = 'idle';
+    this.panGestureRecognizer.reset();
+
+    this.disableVerticalScrollBouncingDispose();
+    this.disableVerticalScrollBouncingDispose = noop;
+  }
+
+  private isInitialized = false;
+  private panState: 'idle' | 'start' | 'moving' = 'idle';
+  private pannedEl: HTMLElement | null = null;
+  private sheetHeight = 0;
+  private rafId: number | null = null;
+  private currentSnapPoint = 0;
+  private nextSnapPoint = 0;
+  private snapPointDetents: SnapPointDetents = [0, 0];
+  private unit: 'px' | '%' = '%';
+  private get isDynamicSnapPoint() {
+    return this.unit === 'px';
+  }
+  private disableVerticalScrollBouncingDispose = noop;
+  private readonly sheetScrollEl: HTMLElement | null;
+  private readonly sheetTransitionController: CSSTransitionController<string>;
+  private readonly backdropTransitionController: CSSTransitionController | null;
+  private readonly panGestureRecognizer: UIPanGestureRecognizer;
+  private readonly onDismiss: VoidFunction;
+
+  private calculateSnapPoint(nextSnapPoint: number, immediately = false) {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+    }
+
+    if (nextSnapPoint <= SNAP_POINT_DETENTS.MIN) {
+      this.sheetTransitionController.enableTransition();
+      this.backdropTransitionController?.enableTransition();
+      this.panState = 'idle';
+      this.onDismiss();
+      return;
+    }
+
+    const backdropOpacity = clamp(
+      this.isDynamicSnapPoint
+        ? nextSnapPoint / this.sheetHeight
+        : (nextSnapPoint * 2) / SNAP_POINT_DETENTS.LARGE,
+      0,
+      1,
+    );
+
+    this.rafId = requestAnimationFrame(() => {
+      if (immediately) {
+        this.backdropTransitionController?.disableTransition().set(backdropOpacity);
+        this.sheetTransitionController.disableTransition().set(`${nextSnapPoint}${this.unit}`);
+        return;
+      }
+
+      if (this.isDynamicSnapPoint) {
+        this.sheetTransitionController.cleanupOnTransitionEnd();
+      }
+
+      this.backdropTransitionController?.unset();
+      this.sheetTransitionController.enableTransition().set(`${this.currentSnapPoint}${this.unit}`);
+    });
+  }
+
+  private getSnapPointTo(nextSnapPoint: number) {
+    const closestSnapPoint = BottomSheetController.getClosestSnapPoint(
+      this.snapPointDetents,
+      nextSnapPoint,
+    );
+    if (closestSnapPoint !== this.currentSnapPoint) {
+      return closestSnapPoint;
+    }
+
+    const panDirection = this.panGestureRecognizer.direction();
+    if (panDirection.axis !== 'y' || panDirection.direction === null) {
+      return this.currentSnapPoint;
+    }
+
+    const velocity = this.panGestureRecognizer.velocity();
+    if (Math.abs(velocity.y) < DRAG_THRESHOLDS.VELOCITY) {
+      return this.currentSnapPoint;
+    }
+
+    const closestSnapPointByDirection = BottomSheetController.getClosestSnapPointByDirection(
+      this.snapPointDetents,
+      closestSnapPoint,
+      panDirection.direction,
+    );
+
+    return closestSnapPointByDirection;
+  }
+
+  private preventUntilPanGestureBecomesExpected() {
+    return (
+      this.panGestureRecognizer.direction().axis === 'x' ||
+      this.panGestureRecognizer.distance() < DRAG_THRESHOLDS.DISTANCE_FOR_MOVING_START
+    );
+  }
+
+  private preventImmediatelyIfPannedElIsNotValid() {
+    return (
+      this.pannedEl === null ||
+      // Элемент со специальным атрибутом
+      this.pannedEl.closest(`[${BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY}=true]`) !== null || // eslint-disable-line no-restricted-properties
+      // Элемент за пределами панели.
+      !this.sheetEl.contains(this.pannedEl)
+    );
+  }
+
+  private preventUntilVerticalScrollingOnSheetScrollElBecomesExpected() {
+    if (
+      this.sheetScrollEl === null ||
+      !this.sheetScrollEl.contains(this.pannedEl) ||
+      this.sheetScrollEl.scrollHeight <= this.sheetScrollEl.clientHeight
+    ) {
+      return false;
+    }
+
+    if (this.sheetScrollEl.scrollTop === 0) {
+      return (
+        this.panGestureRecognizer.direction().direction === -1 &&
+        BottomSheetController.isLastSnapPointDetents(this.snapPointDetents, this.currentSnapPoint)
+      );
+    }
+
+    return true;
+  }
+
+  private preventImmediatelyIfVerticalScrollingOnPannedElIsScrolled() {
+    if (this.pannedEl === null || this.sheetScrollEl === this.pannedEl) {
+      return false;
+    }
+
+    const overflowAncestor = getNearestOverflowAncestor(this.pannedEl, this.sheetEl);
+
+    if (
+      overflowAncestor === null ||
+      this.sheetScrollEl === overflowAncestor ||
+      overflowAncestor.scrollHeight <= overflowAncestor.clientHeight
+    ) {
+      return false;
+    }
+
+    return (
+      overflowAncestor.scrollTop !== 0 || this.panGestureRecognizer.direction().direction === -1
+    );
+  }
+
+  private static disableVerticalScrollBouncingIfNeeded(
+    sheetScrollEl: HTMLElement | null,
+    targetEl: HTMLElement | null,
+  ) {
+    if (
+      sheetScrollEl !== null &&
+      sheetScrollEl.scrollTop <= 0 &&
+      sheetScrollEl.contains(targetEl) &&
+      sheetScrollEl.scrollHeight > sheetScrollEl.clientHeight
+    ) {
+      sheetScrollEl.style.setProperty('overflow-y', 'hidden');
+      return function dispose() {
+        sheetScrollEl.style.removeProperty('overflow-y');
+      };
+    }
+    return noop;
+  }
+
+  private static isLastSnapPointDetents(
+    snapPointDetents: SnapPointDetents,
+    currentY: number,
+  ): boolean {
+    return currentY === snapPointDetents[snapPointDetents.length - 1];
+  }
+
+  private static getClosestSnapPointByDirection(
+    snapPointDetents: SnapPointDetents,
+    currentY: number,
+    direction: -1 | 1,
+  ): number {
+    const foundIndex = snapPointDetents.findIndex((i) => i === currentY);
+    switch (direction) {
+      case -1:
+        return snapPointDetents[foundIndex + 1] ?? snapPointDetents[snapPointDetents.length - 1];
+      case 1:
+        return snapPointDetents[foundIndex - 1] ?? snapPointDetents[0];
+    }
+  }
+
+  private static getClosestSnapPoint(snapPointDetents: SnapPointDetents, currentY: number) {
+    let closest = snapPointDetents[0];
+    let minDifference = Math.abs(snapPointDetents[0] - currentY);
+
+    for (let i = 1; i < snapPointDetents.length; i += 1) {
+      const difference = Math.abs(snapPointDetents[i] - currentY);
+      if (difference < minDifference) {
+        closest = snapPointDetents[i];
+        minDifference = difference;
+      }
+    }
+
+    return closest;
+  }
+}

package/src/lib/sheet/controllers/CSSTransitionController.ts

@@ -0,0 +1,51 @@
+export type CSSTransitionControllerUnit = 'px' | '%' | '';
+
+export class CSSTransitionController<V extends number | string = number> {
+  constructor(
+    public readonly el: HTMLElement,
+    public readonly property: string,
+  ) {}
+
+  set(to: V) {
+    this.el.style.setProperty(this.property, `${to}`);
+    return this;
+  }
+
+  unset(from?: V) {
+    if (from !== undefined) {
+      this.el.addEventListener('transitionend', this.handleTransitionEnd, { once: true });
+      this.enableTransition();
+      this.el.style.setProperty(this.property, `${from}`);
+      return this;
+    }
+
+    return this.cleanup();
+  }
+
+  enableTransition() {
+    this.el.style.removeProperty('transition');
+    return this;
+  }
+
+  disableTransition() {
+    this.el.style.setProperty('transition', 'none');
+    return this;
+  }
+
+  cleanup() {
+    this.el.removeEventListener('transitionend', this.handleTransitionEnd);
+    this.el.style.removeProperty('transition');
+    this.el.style.removeProperty(this.property);
+    return this;
+  }
+
+  cleanupOnTransitionEnd() {
+    this.el.addEventListener('transitionend', this.handleTransitionEnd, { once: true });
+    return this;
+  }
+
+  private readonly handleTransitionEnd = () => {
+    this.cleanup();
+    return this;
+  };
+}

package/src/lib/sheet/index.ts

@@ -0,0 +1,10 @@
+export {
+  BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY,
+  BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE,
+} from './constants';
+export {
+  type UseBottomSheetOptions,
+  type UseBottomSheetHandlers,
+  type UseBottomSheetResult,
+  useBottomSheet,
+} from './useBottomSheet';