@vkontakte/vkui 5.8.2 → 5.9.1

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { tooltipContainerAttr } from './TooltipContainer';\nimport styles from './Tooltip.module.css';\n\n/**\n * Перебиваем `ref`.\n *\n * В оригинальном `React.DOMElement` задаётся `React.LegacyRef<T>`, в котором есть `string`.\n * Когда как `{ ref: \"string\" }` уже давно депрекейтнут.\n */\ninterface DOMElement<P extends React.HTMLAttributes<T> | React.SVGAttributes<T>, T extends Element>\n  extends React.DOMElement<P, T> {\n  ref: React.Ref<T>;\n}\n\nconst isDOMTypeElement = <\n  P extends React.HTMLAttributes<T> | React.SVGAttributes<T>,\n  T extends Element,\n>(\n  element: React.ReactElement,\n): element is DOMElement<P, T> => {\n  return React.isValidElement(element) && typeof element.type === 'string';\n};\n\nconst warn = warnOnce('Tooltip');\n\nexport interface TooltipProps\n  extends Omit<\n    TooltipBaseProps,\n    'arrowCoords' | 'arrowPlacement' | 'getArrowRef' | 'floatingStyle' | 'withArrow'\n  > {\n  /**\n   * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n   * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n   * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n   */\n  children: React.ReactElement<HasRootRef<any>> | React.ReactElement;\n  /**\n   * Если передан `false`, то рисуется просто `children`.\n   */\n  isShown?: boolean;\n  alignX?: 'center' | 'left' | 'right';\n  /**\n   * Положение по вертикали (расположение над или под `children`).\n   * Если не задано, позиция по вертикали определятся автоматически\n   */\n  alignY?: 'top' | 'bottom';\n  /**\n   * Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).\n   */\n  offsetX?: number;\n  /**\n   * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).\n   */\n  offsetY?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Сдвиг стрелочки относительно центра дочернего элемента.\n   */\n  cornerOffset?: number;\n  /**\n   * Сдвиг стрелочки относительно ширины тултипа\n   */\n  cornerAbsoluteOffset?: number;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?: () => void;\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n}\n\nfunction mapAlignX(x: TooltipProps['alignX']) {\n  switch (x) {\n    case 'left':\n      return 'start';\n    case 'right':\n      return 'end';\n    default:\n      return '';\n  }\n}\nfunction getDefaultPlacement(\n  alignX: TooltipProps['alignX'],\n  alignY: TooltipProps['alignY'],\n): Placement {\n  return [alignY || 'bottom', mapAlignX(alignX || 'left')]\n    .filter((p) => !!p)\n    .join('-') as Placement;\n}\nfunction isVerticalPlacement(placement: PlacementWithAuto) {\n  return placement.startsWith('top') || placement.startsWith('bottom');\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({\n  children,\n  isShown: isShownProp = true,\n  offsetX = 0,\n  offsetY = 15,\n  alignX,\n  alignY,\n  onClose,\n  cornerOffset = 0,\n  cornerAbsoluteOffset,\n  arrow = true,\n  arrowPadding = 14,\n  placement: placementProp,\n  maxWidth = TOOLTIP_MAX_WIDTH,\n  ...restProps\n}: TooltipProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const [target, setTarget] = React.useState<HTMLElement | null>(null);\n  /* eslint-disable no-restricted-properties */\n  const tooltipContainer = React.useMemo(\n    () => target?.closest<HTMLDivElement>(`[${tooltipContainerAttr}]`),\n    [target],\n  );\n  const { entering } = useNavTransition();\n  const isShown = isShownProp && tooltipContainer && !entering;\n\n  const placement = placementProp || getDefaultPlacement(alignX, alignY);\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placement);\n\n  if (process.env.NODE_ENV === 'development') {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild = hasReactNode(children) && typeof children !== 'object';\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          'children должен быть одним React элементом, получено',\n          multiChildren && 'несколько',\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(' '),\n        'error',\n      );\n  }\n\n  const floatingPositionStrategy = React.useMemo(\n    () => (target?.style.position === 'fixed' ? 'fixed' : 'absolute'),\n    [target],\n  );\n\n  if (process.env.NODE_ENV === 'development' && target && !tooltipContainer) {\n    throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n  }\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetX,\n        mainAxis: offsetY,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({\n          alignment: placement ? getAutoPlacementAlign(placement) : null,\n        }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n      middlewares.push({\n        name: 'arrowOffset',\n        fn({ placement, middlewareData }) {\n          if (!middlewareData.arrow) {\n            return Promise.resolve({});\n          }\n          if (isVerticalPlacement(placement)) {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.x = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.x !== undefined) {\n              middlewareData.arrow.x += cornerOffset;\n            }\n          } else {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.y = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.y !== undefined) {\n              middlewareData.arrow.y += cornerOffset;\n            }\n          }\n          return Promise.resolve({});\n        },\n      });\n    }\n\n    return middlewares;\n  }, [\n    arrow,\n    arrowRef,\n    arrowPadding,\n    cornerAbsoluteOffset,\n    cornerOffset,\n    offsetX,\n    offsetY,\n    placement,\n    isNotAutoPlacement,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    strategy: floatingPositionStrategy,\n    placement: isNotAutoPlacement ? placement : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted: autoUpdateFloatingElement,\n  });\n\n  const childRef = isDOMTypeElement<React.HTMLAttributes<HTMLElement>, HTMLElement>(children)\n    ? children.ref\n    : React.isValidElement<HasRootRef<HTMLElement>>(children)\n    ? children.props.getRootRef\n    : null;\n  const patchedRef = useExternRef<HTMLElement>(setTarget, refs.setReference, childRef);\n  const child = React.isValidElement(children)\n    ? React.cloneElement(children, {\n        [isDOMTypeElement(children) ? 'ref' : 'getRootRef']: patchedRef,\n      })\n    : children;\n\n  return (\n    <React.Fragment>\n      {child}\n      {isShown &&\n        target != null &&\n        ReactDOM.createPortal(\n          <>\n            <TooltipBase\n              {...restProps}\n              getRootRef={refs.setFloating}\n              floatingStyle={convertFloatingDataToReactCSSProperties(\n                floatingPositionStrategy,\n                floatingDataX,\n                floatingDataY,\n              )}\n              withArrow={arrow}\n              arrowCoords={arrowCoords}\n              arrowPlacement={resolvedPlacement}\n              getArrowRef={setArrowRef}\n              maxWidth={maxWidth}\n            />\n            <div className={styles['Tooltip__overlay']} onClickCapture={onClose} />\n          </>,\n          tooltipContainer,\n        )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","ReactDOM","hasReactNode","useExternRef","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","useFloating","warnOnce","useNavTransition","TOOLTIP_MAX_WIDTH","TooltipBase","tooltipContainerAttr","isDOMTypeElement","element","isValidElement","type","warn","mapAlignX","x","getDefaultPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","isShownProp","isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","arrow","arrowPadding","placementProp","maxWidth","restProps","useState","arrowRef","setArrowRef","target","setTarget","tooltipContainer","useMemo","closest","entering","isNotAutoPlacement","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","floatingPositionStrategy","style","position","Error","memoizedMiddlewares","middlewares","crossAxis","mainAxis","push","alignment","padding","name","fn","middlewareData","Promise","resolve","undefined","y","strategy","middleware","whileElementsMounted","floatingDataX","floatingDataY","resolvedPlacement","refs","arrowCoords","childRef","ref","props","getRootRef","patchedRef","setReference","child","cloneElement","Fragment","createPortal","setFloating","floatingStyle","withArrow","arrowPlacement","getArrowRef","div","className","onClickCapture"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { tooltipContainerAttr } from './TooltipContainer';\nimport styles from './Tooltip.module.css';\n\n/**\n * Перебиваем `ref`.\n *\n * В оригинальном `React.DOMElement` задаётся `React.LegacyRef<T>`, в котором есть `string`.\n * Когда как `{ ref: \"string\" }` уже давно депрекейтнут.\n */\ninterface DOMElement<P extends React.HTMLAttributes<T> | React.SVGAttributes<T>, T extends Element>\n  extends React.DOMElement<P, T> {\n  ref: React.Ref<T>;\n}\n\nconst isDOMTypeElement = <\n  P extends React.HTMLAttributes<T> | React.SVGAttributes<T>,\n  T extends Element,\n>(\n  element: React.ReactElement,\n): element is DOMElement<P, T> => {\n  return React.isValidElement(element) && typeof element.type === 'string';\n};\n\nconst warn = warnOnce('Tooltip');\n\nexport interface TooltipProps\n  extends Omit<\n    TooltipBaseProps,\n    'arrowCoords' | 'arrowPlacement' | 'getArrowRef' | 'floatingStyle' | 'withArrow'\n  > {\n  /**\n   * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n   * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n   * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n   */\n  children: React.ReactElement<HasRootRef<any>> | React.ReactElement;\n  /**\n   * Если передан `false`, то рисуется просто `children`.\n   */\n  isShown?: boolean;\n  alignX?: 'center' | 'left' | 'right';\n  /**\n   * Положение по вертикали (расположение над или под `children`).\n   * Если не задано, позиция по вертикали определятся автоматически\n   */\n  alignY?: 'top' | 'bottom';\n  /**\n   * Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).\n   */\n  offsetX?: number;\n  /**\n   * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).\n   */\n  offsetY?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Сдвиг стрелочки относительно центра дочернего элемента.\n   */\n  cornerOffset?: number;\n  /**\n   * Сдвиг стрелочки относительно ширины тултипа\n   */\n  cornerAbsoluteOffset?: number;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?: () => void;\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n}\n\nfunction mapAlignX(x: TooltipProps['alignX']) {\n  switch (x) {\n    case 'left':\n      return 'start';\n    case 'right':\n      return 'end';\n    default:\n      return '';\n  }\n}\nfunction getDefaultPlacement(\n  alignX: TooltipProps['alignX'],\n  alignY: TooltipProps['alignY'],\n): Placement {\n  return [alignY || 'bottom', mapAlignX(alignX || 'left')]\n    .filter((p) => !!p)\n    .join('-') as Placement;\n}\nfunction isVerticalPlacement(placement: PlacementWithAuto) {\n  return placement.startsWith('top') || placement.startsWith('bottom');\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({\n  children,\n  isShown: isShownProp = true,\n  offsetX = 0,\n  offsetY = 15,\n  alignX,\n  alignY,\n  onClose,\n  cornerOffset = 0,\n  cornerAbsoluteOffset,\n  arrow = true,\n  arrowPadding = 14,\n  placement: placementProp,\n  maxWidth = TOOLTIP_MAX_WIDTH,\n  ...restProps\n}: TooltipProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const [target, setTarget] = React.useState<HTMLElement | null>(null);\n  /* eslint-disable no-restricted-properties */\n  const tooltipContainer = React.useMemo(\n    () => target?.closest<HTMLDivElement>(`[${tooltipContainerAttr}]`),\n    [target],\n  );\n  const { entering } = useNavTransition();\n  const isShown = isShownProp && tooltipContainer && !entering;\n\n  const placement = placementProp || getDefaultPlacement(alignX, alignY);\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placement);\n\n  if (process.env.NODE_ENV === 'development') {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild = hasReactNode(children) && typeof children !== 'object';\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          'children должен быть одним React элементом, получено',\n          multiChildren && 'несколько',\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(' '),\n        'error',\n      );\n  }\n\n  const floatingPositionStrategy = React.useMemo(\n    () => (target?.style.position === 'fixed' ? 'fixed' : 'absolute'),\n    [target],\n  );\n\n  if (process.env.NODE_ENV === 'development' && target && !tooltipContainer) {\n    throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n  }\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetX,\n        mainAxis: offsetY,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({\n          alignment: placement ? getAutoPlacementAlign(placement) : null,\n        }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n      middlewares.push({\n        name: 'arrowOffset',\n        fn({ placement, middlewareData }) {\n          if (!middlewareData.arrow) {\n            return Promise.resolve({});\n          }\n          if (isVerticalPlacement(placement)) {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.x = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.x !== undefined) {\n              middlewareData.arrow.x += cornerOffset;\n            }\n          } else {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.y = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.y !== undefined) {\n              middlewareData.arrow.y += cornerOffset;\n            }\n          }\n          return Promise.resolve({});\n        },\n      });\n    }\n\n    return middlewares;\n  }, [\n    arrow,\n    arrowRef,\n    arrowPadding,\n    cornerAbsoluteOffset,\n    cornerOffset,\n    offsetX,\n    offsetY,\n    placement,\n    isNotAutoPlacement,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    strategy: floatingPositionStrategy,\n    placement: isNotAutoPlacement ? placement : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted: autoUpdateFloatingElement,\n  });\n\n  const childRef = isDOMTypeElement<React.HTMLAttributes<HTMLElement>, HTMLElement>(children)\n    ? children.ref\n    : React.isValidElement<HasRootRef<HTMLElement>>(children)\n    ? children.props.getRootRef\n    : null;\n  const patchedRef = useExternRef<HTMLElement>(setTarget, refs.setReference, childRef);\n  const child = React.isValidElement(children)\n    ? React.cloneElement(children, {\n        [isDOMTypeElement(children) ? 'ref' : 'getRootRef']: patchedRef,\n      })\n    : children;\n\n  return (\n    <React.Fragment>\n      {child}\n      {isShown &&\n        target != null &&\n        ReactDOM.createPortal(\n          <>\n            <TooltipBase\n              {...restProps}\n              getRootRef={refs.setFloating}\n              floatingStyle={convertFloatingDataToReactCSSProperties(\n                floatingPositionStrategy,\n                floatingDataX,\n                floatingDataY,\n              )}\n              withArrow={arrow}\n              arrowCoords={arrowCoords}\n              arrowPlacement={resolvedPlacement}\n              getArrowRef={setArrowRef}\n              maxWidth={maxWidth}\n            />\n            <div className={styles['Tooltip__overlay']} onClickCapture={onClose} />\n          </>,\n          tooltipContainer,\n        )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","ReactDOM","hasReactNode","useExternRef","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","useFloating","warnOnce","useNavTransition","TOOLTIP_MAX_WIDTH","TooltipBase","tooltipContainerAttr","isDOMTypeElement","element","isValidElement","type","warn","mapAlignX","x","getDefaultPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","isShownProp","isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","arrow","arrowPadding","placementProp","maxWidth","restProps","useState","arrowRef","setArrowRef","target","setTarget","tooltipContainer","useMemo","closest","entering","isNotAutoPlacement","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","floatingPositionStrategy","style","position","Error","memoizedMiddlewares","middlewares","crossAxis","mainAxis","push","alignment","padding","name","fn","middlewareData","Promise","resolve","undefined","y","strategy","middleware","whileElementsMounted","floatingDataX","floatingDataY","resolvedPlacement","refs","arrowCoords","childRef","ref","props","getRootRef","patchedRef","setReference","child","cloneElement","Fragment","createPortal","setFloating","floatingStyle","withArrow","arrowPlacement","getArrowRef","div","className","onClickCapture"],"mappings":"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"}

package/dist/components/Tooltip/TooltipContainer.d.ts

@@ -3,3 +3,4 @@ export declare const tooltipContainerAttr = "data-tooltip-container";
 export declare const TooltipContainer: React.ForwardRefExoticComponent<React.HtmlHTMLAttributes<HTMLDivElement> & {
     fixed?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=TooltipContainer.d.ts.map

package/dist/components/Tooltip/TooltipContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,oBAAoB,2BAA2B,CAAC;AAC7D,eAAO,MAAM,gBAAgB;;wCAM3B,CAAC"}

package/dist/components/TooltipBase/TooltipBase.d.ts

@@ -54,3 +54,4 @@ export interface TooltipBaseProps extends HasRootRef<HTMLDivElement> {
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
 export declare const TooltipBase: ({ appearance, withArrow, arrowCoords, arrowPlacement, getArrowRef, getRootRef, floatingStyle, ArrowIcon, text, header, maxWidth, ...restProps }: TooltipBaseProps) => React.JSX.Element;
+//# sourceMappingURL=TooltipBase.d.ts.map

package/dist/components/TooltipBase/TooltipBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipBase.d.ts","sourceRoot":"","sources":["../../../src/components/TooltipBase/TooltipBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAKhF,eAAO,MAAM,iBAAiB,MAAM,CAAC;AASrC,MAAM,WAAW,gBAAiB,SAAQ,UAAU,CAAC,cAAc,CAAC;IAClE;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,CAAC;IACpE;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACzC,cAAc,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC/C,WAAW,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC7C;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACrC;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,oJAarB,gBAAgB,sBA6BlB,CAAC"}

package/dist/components/Touch/Touch.d.ts

@@ -50,3 +50,4 @@ export type DragHandler = (e: React.DragEvent<HTMLElement>) => void;
  */
 export declare const Touch: ({ onStart, onStartX, onStartY, onMove: _onMove, onMoveX, onMoveY, onLeave, onEnter, onEnd: _onEnd, onEndX, onEndY, onClickCapture, usePointerHover, slideThreshold, useCapture, Component, getRootRef, noSlideClick, stopPropagation, ...restProps }: TouchProps) => React.JSX.Element;
 export {};
+//# sourceMappingURL=Touch.d.ts.map

package/dist/components/Touch/Touch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Touch.d.ts","sourceRoot":"","sources":["../../../src/components/Touch/Touch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAoD,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnG,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEvD,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,UAAU,CAAC,WAAW,CAAC,EACvB,YAAY;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,OAAO;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,IAAI,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,OAAO,CAAC;IACb,GAAG,EAAE,OAAO,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,UAAW,SAAQ,OAAO;IACzC,aAAa,EAAE,cAAc,CAAC;CAC/B;AAED,KAAK,YAAY,GAAG,CAAC,WAAW,EAAE,UAAU,KAAK,IAAI,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;AACtE,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;AAEpE;;GAEG;AACH,eAAO,MAAM,KAAK,yPAqBf,UAAU,sBAoLZ,CAAC"}

package/dist/components/Touch/TouchContext.d.ts

@@ -5,3 +5,4 @@ import * as React from 'react';
  */
 declare const TouchRootContext: React.Context<boolean>;
 export default TouchRootContext;
+//# sourceMappingURL=TouchContext.d.ts.map

package/dist/components/Touch/TouchContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchContext.d.ts","sourceRoot":"","sources":["../../../src/components/Touch/TouchContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;GAGG;AACH,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAuC,CAAC;AAGrF,eAAe,gBAAgB,CAAC"}

package/dist/components/Typography/Caption/Caption.d.ts

@@ -7,3 +7,4 @@ export interface CaptionProps extends TypographyProps, HasCaps {
  * @see https://vkcom.github.io/VKUI/#/Caption
  */
 export declare const Caption: ({ className, level, caps, Component, normalize, ...restProps }: CaptionProps) => React.JSX.Element;
+//# sourceMappingURL=Caption.d.ts.map

package/dist/components/Typography/Caption/Caption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Caption.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Caption/Caption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AASrE,MAAM,WAAW,YAAa,SAAQ,eAAe,EAAE,OAAO;IAC5D,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,mEAOjB,YAAY,sBASd,CAAC"}

package/dist/components/Typography/Footnote/Footnote.d.ts

@@ -6,3 +6,4 @@ export interface FootnoteProps extends TypographyProps, HasCaps {
  * @see https://vkcom.github.io/VKUI/#/Footnote
  */
 export declare const Footnote: ({ className, caps, Component, normalize, ...restProps }: FootnoteProps) => React.JSX.Element;
+//# sourceMappingURL=Footnote.d.ts.map

package/dist/components/Typography/Footnote/Footnote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footnote.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Footnote/Footnote.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrE,MAAM,WAAW,aAAc,SAAQ,eAAe,EAAE,OAAO;CAAG;AAElE;;GAEG;AACH,eAAO,MAAM,QAAQ,4DAMlB,aAAa,sBAOf,CAAC"}

package/dist/components/Typography/Headline/Headline.d.ts

@@ -7,3 +7,4 @@ export interface HeadlineProps extends TypographyProps {
  * @see https://vkcom.github.io/VKUI/#/Headline
  */
 export declare const Headline: ({ className, weight, level, Component, normalize, ...restProps }: HeadlineProps) => React.JSX.Element;
+//# sourceMappingURL=Headline.d.ts.map

package/dist/components/Typography/Headline/Headline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Headline.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Headline/Headline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAa5D,MAAM,WAAW,aAAc,SAAQ,eAAe;IACpD,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,qEAOlB,aAAa,sBAgBf,CAAC"}

package/dist/components/Typography/Paragraph/Paragraph.d.ts

@@ -5,3 +5,4 @@ export type ParagraphProps = TypographyProps;
  * @see https://vkcom.github.io/VKUI/#/Paragraph
  */
 export declare const Paragraph: ({ className, Component, normalize, ...restProps }: ParagraphProps) => React.JSX.Element;
+//# sourceMappingURL=Paragraph.d.ts.map

package/dist/components/Typography/Paragraph/Paragraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Paragraph/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,MAAM,MAAM,cAAc,GAAG,eAAe,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,SAAS,sDAKnB,cAAc,sBAShB,CAAC"}

package/dist/components/Typography/Subhead/Subhead.d.ts

@@ -5,3 +5,4 @@ export type SubheadProps = TypographyProps;
  * @see https://vkcom.github.io/VKUI/#/Subhead
  */
 export declare const Subhead: ({ className, Component, normalize, ...restProps }: SubheadProps) => React.JSX.Element;
+//# sourceMappingURL=Subhead.d.ts.map

package/dist/components/Typography/Subhead/Subhead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Subhead.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Subhead/Subhead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAQ5D,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAE3C;;GAEG;AACH,eAAO,MAAM,OAAO,sDAKjB,YAAY,sBAed,CAAC"}

package/dist/components/Typography/Text/Text.d.ts

@@ -5,3 +5,4 @@ export type TextProps = TypographyProps;
  * @see https://vkcom.github.io/VKUI/#/Text
  */
 export declare const Text: ({ className, Component, normalize, ...restProps }: TextProps) => React.JSX.Element;
+//# sourceMappingURL=Text.d.ts.map

package/dist/components/Typography/Text/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAQ5D,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;AAExC;;GAEG;AACH,eAAO,MAAM,IAAI,sDAKd,SAAS,sBAeX,CAAC"}

package/dist/components/Typography/Title/Title.d.ts

@@ -7,3 +7,4 @@ export interface TitleProps extends TypographyProps {
  * @see https://vkcom.github.io/VKUI/#/Title
  */
 export declare const Title: ({ className, level, Component, normalize, ...restProps }: TitleProps) => React.JSX.Element;
+//# sourceMappingURL=Title.d.ts.map

package/dist/components/Typography/Title/Title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Title/Title.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAS5D,MAAM,WAAW,UAAW,SAAQ,eAAe;IACjD,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,6DAMf,UAAU,sBAaZ,CAAC"}

package/dist/components/Typography/Typography.d.ts

@@ -14,3 +14,4 @@ export interface TypographyProps extends React.AllHTMLAttributes<HTMLElement>, H
     normalize?: boolean;
 }
 export declare const Typography: ({ weight, Component, normalize, ...restProps }: TypographyProps) => React.JSX.Element;
+//# sourceMappingURL=Typography.d.ts.map

package/dist/components/Typography/Typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAUvD,MAAM,WAAW,OAAO;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,YAAY,EACZ,UAAU,CAAC,WAAW,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,mDAKpB,eAAe,sBAUjB,CAAC"}

package/dist/components/UsersStack/UsersStack.d.ts

@@ -37,3 +37,4 @@ export interface UsersStackProps extends HTMLAttributesWithRootRef<HTMLDivElemen
  * @see https://vkcom.github.io/VKUI/#/UsersStack
  */
 export declare const UsersStack: ({ photos, visibleCount, count, size, layout, children, direction: directionProp, ...restProps }: UsersStackProps) => React.JSX.Element;
+//# sourceMappingURL=UsersStack.d.ts.map

package/dist/components/UsersStack/UsersStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsersStack.d.ts","sourceRoot":"","sources":["../../../src/components/UsersStack/UsersStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAkBxD,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACnC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,QAAQ,CAAC;CAC9C;AAuED;;GAEG;AACH,eAAO,MAAM,UAAU,oGASpB,eAAe,sBA4EjB,CAAC"}

package/dist/components/View/View.d.ts

@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { NavIdProps } from '../../lib/getNavId';
 import { HTMLAttributesWithRootRef } from '../../types';
-declare enum SwipeBackResults {
-    fail = 1,
-    success = 2
-}
 interface Scrolls {
     [index: string]: number | undefined;
 }
@@ -36,23 +32,9 @@ export interface ViewProps extends HTMLAttributesWithRootRef<HTMLElement>, NavId
     history?: string[];
     children: React.ReactElement | Iterable<React.ReactElement>;
 }
-export interface ViewState {
-    animated: boolean;
-    visiblePanels: string[];
-    activePanel: string | null;
-    isBack: boolean | undefined;
-    prevPanel: string | null;
-    nextPanel: string | null;
-    swipingBack: boolean;
-    swipeBackStartX: number;
-    swipeBackShift: number;
-    swipeBackNextPanel: string | null;
-    swipeBackPrevPanel: string | null;
-    swipeBackResult: SwipeBackResults | null;
-    browserSwipe: boolean;
-}
 /**
  * @see https://vkcom.github.io/VKUI/#/View
  */
 export declare const View: ({ activePanel: activePanelProp, history, nav, onTransition, onSwipeBack, onSwipeBackStart, onSwipeBackCancel: onSwipeBackCancelProp, children, className, ...restProps }: ViewProps) => React.JSX.Element;
 export {};
+//# sourceMappingURL=View.d.ts.map

package/dist/components/View/View.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../src/components/View/View.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAY,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAK1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAoBxD,UAAU,OAAO;IACf,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,UAAU,YAAY;IACpB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED,eAAO,IAAI,YAAY,EAAE,YAAiB,CAAC;AAE3C,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAAE,UAAU;IACnF,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC3E;;OAEG;IACH,WAAW,CAAC,IAAI,IAAI,CAAC;IACrB;;;;OAIG;IACH,gBAAgB,CAAC,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IAChE;;OAEG;IACH,iBAAiB,CAAC,IAAI,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;CAC7D;AAID;;GAEG;AACH,eAAO,MAAM,IAAI,6KAWd,SAAS,sBA0eX,CAAC"}

package/dist/components/View/View.js

@@ -16,12 +16,12 @@ import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { warnOnce } from "../../lib/warnOnce";
 import { useScroll } from "../AppRoot/ScrollContext";
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
+import { NavViewIdContext } from "../NavIdContext/NavIdContext";
 import { NavTransitionProvider } from "../NavTransitionContext/NavTransitionContext";
 import { NavTransitionDirectionProvider } from "../NavTransitionDirectionContext/NavTransitionDirectionContext";
 import { useSplitCol } from "../SplitCol/SplitColContext";
 import { Touch } from "../Touch/Touch";
-import { swipeBackExcluded } from "./utils";
-var SWIPE_BACK_AREA = 70;
+import { getSwipeBackPredicates, hasHorizontalScrollableElementWithScrolledToLeft, swipeBackExcluded } from "./utils";
 var SwipeBackResults;
 (function(SwipeBackResults) {
     SwipeBackResults[SwipeBackResults["fail"] = 1] = "fail";
@@ -43,18 +43,14 @@ var warn = warnOnce("View");
         "children",
         "className"
     ]);
-    var _configProvider, _splitCol;
-    var scrolls = React.useRef(scrollsCache[getNavId({
+    var id = getNavId({
         nav: nav,
         id: restProps.id
-    })] || {});
+    });
+    var scrolls = React.useRef(scrollsCache[id] || {});
     var afterTransition = React.useRef(noop);
     React.useEffect(function() {
         return function() {
-            var id = getNavId({
-                nav: nav,
-                id: restProps.id
-            });
             if (id) {
                 scrollsCache[id] = scrolls.current;
             }
@@ -74,14 +70,14 @@ var warn = warnOnce("View");
     var _React_useState3 = _sliced_to_array(React.useState(undefined), 2), isBack = _React_useState3[0], setIsBack = _React_useState3[1];
     var _React_useState4 = _sliced_to_array(React.useState(null), 2), prevPanel = _React_useState4[0], setPrevPanel = _React_useState4[1];
     var _React_useState5 = _sliced_to_array(React.useState(null), 2), nextPanel = _React_useState5[0], setNextPanel = _React_useState5[1];
+    var swipeBackPrevented = React.useRef(false);
     var _React_useState6 = _sliced_to_array(React.useState(undefined), 2), swipingBack = _React_useState6[0], setSwipingBack = _React_useState6[1];
-    var _React_useState7 = _sliced_to_array(React.useState(false), 2), swipeBackPrevented = _React_useState7[0], setSwipeBackPrevented = _React_useState7[1];
-    var _React_useState8 = _sliced_to_array(React.useState(0), 2), swipeBackStartX = _React_useState8[0], setSwipeBackStartX = _React_useState8[1];
-    var _React_useState9 = _sliced_to_array(React.useState(0), 2), swipeBackShift = _React_useState9[0], setSwipeBackShift = _React_useState9[1];
-    var _React_useState10 = _sliced_to_array(React.useState(null), 2), swipeBackNextPanel = _React_useState10[0], setSwipeBackNextPanel = _React_useState10[1];
-    var _React_useState11 = _sliced_to_array(React.useState(null), 2), swipeBackPrevPanel = _React_useState11[0], setSwipeBackPrevPanel = _React_useState11[1];
-    var _React_useState12 = _sliced_to_array(React.useState(null), 2), swipeBackResult = _React_useState12[0], setSwipeBackResult = _React_useState12[1];
-    var _React_useState13 = _sliced_to_array(React.useState(false), 2), browserSwipe = _React_useState13[0], setBrowserSwipe = _React_useState13[1];
+    var _React_useState7 = _sliced_to_array(React.useState(0), 2), swipeBackStartX = _React_useState7[0], setSwipeBackStartX = _React_useState7[1];
+    var _React_useState8 = _sliced_to_array(React.useState(0), 2), swipeBackShift = _React_useState8[0], setSwipeBackShift = _React_useState8[1];
+    var _React_useState9 = _sliced_to_array(React.useState(null), 2), swipeBackNextPanel = _React_useState9[0], setSwipeBackNextPanel = _React_useState9[1];
+    var _React_useState10 = _sliced_to_array(React.useState(null), 2), swipeBackPrevPanel = _React_useState10[0], setSwipeBackPrevPanel = _React_useState10[1];
+    var _React_useState11 = _sliced_to_array(React.useState(null), 2), swipeBackResult = _React_useState11[0], setSwipeBackResult = _React_useState11[1];
+    var _React_useState12 = _sliced_to_array(React.useState(false), 2), browserSwipe = _React_useState12[0], setBrowserSwipe = _React_useState12[1];
     var prevActivePanel = usePrevious(activePanelProp);
     var prevSwipingBack = usePrevious(swipingBack);
     var prevBrowserSwipe = usePrevious(browserSwipe);
@@ -92,7 +88,8 @@ var warn = warnOnce("View");
         var panelId = getNavId(panel.props, warn);
         return panelId !== undefined && visiblePanels.includes(panelId) || panelId === swipeBackPrevPanel || panelId === swipeBackNextPanel;
     });
-    var disableAnimation = ((_configProvider = configProvider) === null || _configProvider === void 0 ? void 0 : _configProvider.transitionMotionEnabled) === false || !((_splitCol = splitCol) === null || _splitCol === void 0 ? void 0 : _splitCol.animate) || platform === Platform.VKCOM;
+    var disableAnimation = !configProvider.transitionMotionEnabled || !splitCol.animate || platform === Platform.VKCOM;
+    var iOSSwipeBackSimulationEnabled = !disableAnimation && platform === Platform.IOS && configProvider.isWebView && Boolean(onSwipeBack);
     var pickPanel = function(id) {
         if (id === null) {
             return null;
@@ -112,8 +109,7 @@ var warn = warnOnce("View");
         setAnimated(false);
         setIsBack(isBackTransition);
         afterTransition.current = function() {
-            var _scroll;
-            (_scroll = scroll) === null || _scroll === void 0 ? void 0 : _scroll.scrollTo(0, isBackTransition ? scrolls.current[activePanelProp] : 0);
+            scroll === null || scroll === void 0 ? void 0 : scroll.scrollTo(0, isBackTransition ? scrolls.current[activePanelProp] : 0);
             onTransition && onTransition({
                 isBack: isBackTransition,
                 from: prevPanel,
@@ -164,14 +160,13 @@ var warn = warnOnce("View");
         onSwipeBackCancelProp
     ]);
     var swipingBackTransitionEndHandler = React.useCallback(function(e) {
-        var _e, _e1;
         // indexOf because of vendor prefixes in old browsers
-        if (!e || ((_e = e) === null || _e === void 0 ? void 0 : _e.propertyName.includes("transform")) && ((_e1 = e) === null || _e1 === void 0 ? void 0 : _e1.target) === pickPanel(swipeBackNextPanel)) {
+        if (!e || (e === null || e === void 0 ? void 0 : e.propertyName.includes("transform")) && (e === null || e === void 0 ? void 0 : e.target) === pickPanel(swipeBackNextPanel)) {
             switch(swipeBackResult){
-                case SwipeBackResults.fail:
+                case 1:
                     onSwipeBackCancel();
                     break;
-                case SwipeBackResults.success:
+                case 2:
                     onSwipeBackSuccess();
             }
         }
@@ -181,34 +176,47 @@ var warn = warnOnce("View");
         swipeBackNextPanel,
         swipeBackResult
     ]);
-    var onMoveX = function(event) {
-        var _configProvider;
-        if (platform !== Platform.IOS || swipeBackPrevented || swipeBackExcluded(event) || disableAnimation) {
+    var handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext = function(event) {
+        if (browserSwipe) {
             return;
         }
-        if (!((_configProvider = configProvider) === null || _configProvider === void 0 ? void 0 : _configProvider.isWebView)) {
-            if ((event.startX <= SWIPE_BACK_AREA || event.startX >= window.innerWidth - SWIPE_BACK_AREA) && !browserSwipe) {
-                setBrowserSwipe(true);
-            }
+        var _getSwipeBackPredicates = getSwipeBackPredicates(event.startX, event.shiftX, window.innerWidth), swipeBackTriggered = _getSwipeBackPredicates.swipeBackTriggered, viewportStartEdgeTouched = _getSwipeBackPredicates.viewportStartEdgeTouched, viewportEndEdgeTouched = _getSwipeBackPredicates.viewportEndEdgeTouched;
+        if ((viewportStartEdgeTouched || viewportEndEdgeTouched) && swipeBackTriggered) {
+            setBrowserSwipe(true);
+        }
+    };
+    var handleTouchMoveXForIOSSwipeBackSimulation = function(event) {
+        if (swipeBackPrevented.current || swipeBackExcluded(event)) {
             return;
         }
-        if (!onSwipeBack || animated && event.startX <= SWIPE_BACK_AREA) {
+        var _getSwipeBackPredicates = getSwipeBackPredicates(event.startX, event.shiftX, window.innerWidth), swipedToOpposite = _getSwipeBackPredicates.swipedToOpposite, swipeBackTriggered = _getSwipeBackPredicates.swipeBackTriggered, viewportStartEdgeTouched = _getSwipeBackPredicates.viewportStartEdgeTouched;
+        if (animated && swipeBackTriggered) {
             return;
         }
-        if (!swipingBack && event.startX <= SWIPE_BACK_AREA && history && history.length > 1) {
+        if (!swipingBack && history && history.length > 1) {
+            if (swipedToOpposite) {
+                swipeBackPrevented.current = true;
+                return;
+            }
+            if (!swipeBackTriggered) {
+                return;
+            }
+            if (!viewportStartEdgeTouched && hasHorizontalScrollableElementWithScrolledToLeft(event.originalEvent.target)) {
+                swipeBackPrevented.current = true;
+                return;
+            }
             // Начался свайп назад
             if (onSwipeBackStart) {
                 var payload = onSwipeBackStart(activePanel);
                 if (payload === "prevent") {
-                    setSwipeBackPrevented(true);
+                    swipeBackPrevented.current = true;
                     return;
                 }
             }
             if (activePanel !== null) {
-                var _scroll;
                 // Note: вызываем закрытие клавиатуры. В iOS это нативное поведение при свайпе.
                 blurActiveElement(document);
-                scrolls.current[activePanel] = (_scroll = scroll) === null || _scroll === void 0 ? void 0 : _scroll.getScroll().y;
+                scrolls.current[activePanel] = scroll === null || scroll === void 0 ? void 0 : scroll.getScroll().y;
             }
             setSwipingBack(true);
             setSwipeBackStartX(event.startX);
@@ -216,18 +224,17 @@ var warn = warnOnce("View");
             setSwipeBackNextPanel(history.slice(-2)[0]);
         }
         if (swipingBack) {
-            var swipeBackShift = 0;
             if (event.shiftX < 0) {
-                swipeBackShift = 0;
+                setSwipeBackShift(0);
             } else if (event.shiftX > window.innerWidth - swipeBackStartX) {
-                swipeBackShift = window.innerWidth;
+                setSwipeBackShift(window.innerWidth);
             } else {
-                swipeBackShift = event.shiftX;
+                setSwipeBackShift(event.shiftX);
             }
-            setSwipeBackShift(swipeBackShift);
         }
     };
-    var onEnd = React.useCallback(function(event) {
+    var handleTouchEndForIOSSwipeBackSimulation = function(event) {
+        swipeBackPrevented.current = false;
         if (swipingBack) {
             var speed = swipeBackShift / event.duration * 1000;
             var _window_innerWidth;
@@ -235,24 +242,13 @@ var warn = warnOnce("View");
                 onSwipeBackCancel();
             } else if (swipeBackShift >= ((_window_innerWidth = window.innerWidth) !== null && _window_innerWidth !== void 0 ? _window_innerWidth : 0)) {
                 onSwipeBackSuccess();
-            } else if (speed > 250 || swipeBackStartX + swipeBackShift > window.innerWidth / 2) {
-                setSwipeBackResult(SwipeBackResults.success);
+            } else if (speed > 250 || swipeBackShift >= window.innerWidth / 2) {
+                setSwipeBackResult(2);
             } else {
-                setSwipeBackResult(SwipeBackResults.fail);
+                setSwipeBackResult(1);
             }
         }
-        if (swipeBackPrevented) {
-            setSwipeBackPrevented(false);
-        }
-    }, [
-        onSwipeBackCancel,
-        onSwipeBackSuccess,
-        swipeBackShift,
-        swipeBackStartX,
-        swipingBack,
-        swipeBackPrevented,
-        window
-    ]);
+    };
     var calcPanelSwipeStyles = function(panelId) {
         if (!canUseDOM || !window) {
             return {};
@@ -264,12 +260,6 @@ var warn = warnOnce("View");
         }
         var prevPanelTranslate = "".concat(swipeBackShift, "px");
         var nextPanelTranslate = "".concat(-50 + swipeBackShift * 100 / window.innerWidth / 2, "%");
-        var prevPanelShadow = 0.3 * (window.innerWidth - swipeBackShift) / window.innerWidth;
-        if (swipeBackResult) {
-            return isPrev ? {
-                boxShadow: "-2px 0 12px rgba(0, 0, 0, ".concat(prevPanelShadow, ")")
-            } : {};
-        }
         if (isNext) {
             return {
                 transform: "translate3d(".concat(nextPanelTranslate, ", 0, 0)"),
@@ -279,23 +269,36 @@ var warn = warnOnce("View");
         if (isPrev) {
             return {
                 transform: "translate3d(".concat(prevPanelTranslate, ", 0, 0)"),
-                WebkitTransform: "translate3d(".concat(prevPanelTranslate, ", 0, 0)"),
-                boxShadow: "-2px 0 12px rgba(0, 0, 0, ".concat(prevPanelShadow, ")")
+                WebkitTransform: "translate3d(".concat(prevPanelTranslate, ", 0, 0)")
             };
         }
         return {};
     };
+    var calcPanelSwipeBackOverlayStyles = function(panelId) {
+        if (!canUseDOM || !window) {
+            return {};
+        }
+        var isNext = panelId === swipeBackNextPanel;
+        if (!isNext) {
+            return {};
+        }
+        var calculatedOpacity = 1 - swipeBackShift / window.innerWidth;
+        var opacityOnSwipeEnd = swipeBackResult === 2 ? 0 : swipeBackResult === 1 ? 1 : null;
+        return {
+            display: "block",
+            opacity: opacityOnSwipeEnd === null ? calculatedOpacity : opacityOnSwipeEnd
+        };
+    };
     React.useEffect(function() {
         // Нужен переход
         if (prevActivePanel && prevActivePanel !== activePanelProp && !prevSwipingBack && !prevBrowserSwipe) {
-            var _scroll;
             var firstLayerId = React.Children.toArray(children).map(function(panel) {
                 return getNavId(panel.props, warn);
             }).find(function(id) {
                 return id === prevActivePanel || id === activePanelProp;
             });
             var isBackTransition = firstLayerId === activePanelProp;
-            scrolls.current[prevActivePanel] = (_scroll = scroll) === null || _scroll === void 0 ? void 0 : _scroll.getScroll().y;
+            scrolls.current[prevActivePanel] = scroll === null || scroll === void 0 ? void 0 : scroll.getScroll().y;
             if (disableAnimation) {
                 flushTransition(prevActivePanel, isBackTransition);
             } else {
@@ -335,8 +338,7 @@ var warn = warnOnce("View");
             setIsBack(true);
             afterTransition.current = function() {
                 if (nextPanel !== null) {
-                    var _scroll;
-                    (_scroll = scroll) === null || _scroll === void 0 ? void 0 : _scroll.scrollTo(0, scrolls.current[nextPanel]);
+                    scroll === null || scroll === void 0 ? void 0 : scroll.scrollTo(0, scrolls.current[nextPanel]);
                 }
                 prevOnTransition && prevOnTransition({
                     isBack: true,
@@ -350,9 +352,8 @@ var warn = warnOnce("View");
             waitTransitionFinish(pickPanel(swipeBackNextPanel), swipingBackTransitionEndHandler, platform === Platform.IOS ? 600 : 300);
         }
         // Если свайп назад отменился (когда пользователь недостаточно сильно свайпнул)
-        if (prevSwipeBackResult === SwipeBackResults.fail && !swipeBackResult && activePanel !== null) {
-            var _scroll1;
-            (_scroll1 = scroll) === null || _scroll1 === void 0 ? void 0 : _scroll1.scrollTo(0, scrolls.current[activePanel]);
+        if (prevSwipeBackResult === 1 && !swipeBackResult && activePanel !== null) {
+            scroll === null || scroll === void 0 ? void 0 : scroll.scrollTo(0, scrolls.current[activePanel]);
         }
         // Закончился Safari свайп
         if (prevActivePanel !== activePanelProp && browserSwipe) {
@@ -374,8 +375,6 @@ var warn = warnOnce("View");
         disableAnimation,
         document,
         flushTransition,
-        onSwipeBackStart,
-        panels,
         platform,
         prevActivePanel,
         prevBrowserSwipe,
@@ -386,16 +385,17 @@ var warn = warnOnce("View");
         scroll,
         swipeBackNextPanel,
         swipeBackResult,
-        swipingBack,
         swipingBackTransitionEndHandler,
         waitTransitionFinish
     ]);
-    return /*#__PURE__*/ React.createElement(Touch, _object_spread_props(_object_spread({
+    return /*#__PURE__*/ React.createElement(NavViewIdContext.Provider, {
+        value: id
+    }, /*#__PURE__*/ React.createElement(Touch, _object_spread_props(_object_spread({
         Component: "section"
     }, restProps), {
         className: classNames("vkuiView", platform === Platform.IOS && classNames("vkuiView--ios", "vkuiInternalView--ios"), !disableAnimation && animated && "vkuiView--animated", !disableAnimation && swipingBack && "vkuiView--swiping-back", disableAnimation && "vkuiView--no-motion", className),
-        onMoveX: onMoveX,
-        onEnd: onEnd
+        onMoveX: iOSSwipeBackSimulationEnabled ? handleTouchMoveXForIOSSwipeBackSimulation : platform === Platform.IOS ? handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext : undefined,
+        onEnd: iOSSwipeBackSimulationEnabled ? handleTouchEndForIOSSwipeBackSimulation : undefined
     }), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiView__panels"
     }, panels.map(function(panel) {
@@ -405,14 +405,17 @@ var warn = warnOnce("View");
         var compensateScroll = isPrev || panelId === swipeBackNextPanel || panelId === nextPanel && isBack;
         var _scrolls_current_panelId;
         return /*#__PURE__*/ React.createElement("div", {
-            className: classNames("vkuiView__panel", panelId === activePanel && "vkuiView__panel--active", panelId === prevPanel && "vkuiView__panel--prev", panelId === nextPanel && "vkuiView__panel--next", panelId === swipeBackPrevPanel && "vkuiView__panel--swipe-back-prev", panelId === swipeBackNextPanel && "vkuiView__panel--swipe-back-next", swipeBackResult === SwipeBackResults.success && "vkuiView__panel--swipe-back-success", swipeBackResult === SwipeBackResults.fail && "vkuiView__panel--swipe-back-failed"),
+            className: classNames("vkuiView__panel", panelId === activePanel && "vkuiView__panel--active", panelId === prevPanel && "vkuiView__panel--prev", panelId === nextPanel && "vkuiView__panel--next", panelId === swipeBackPrevPanel && "vkuiView__panel--swipe-back-prev", panelId === swipeBackNextPanel && "vkuiView__panel--swipe-back-next", swipeBackResult === 2 && "vkuiView__panel--swipe-back-success", swipeBackResult === 1 && "vkuiView__panel--swipe-back-failed"),
             onAnimationEnd: isTransitionTarget ? transitionEndHandler : undefined,
             ref: function(el) {
                 return panelId !== undefined && (panelNodes.current[panelId] = el);
             },
             style: calcPanelSwipeStyles(panelId),
             key: panelId
-        }, /*#__PURE__*/ React.createElement("div", {
+        }, platform === Platform.IOS && /*#__PURE__*/ React.createElement("div", {
+            className: "vkuiView__panel-overlay",
+            style: calcPanelSwipeBackOverlayStyles(panelId)
+        }), /*#__PURE__*/ React.createElement("div", {
             className: "vkuiView__panel-in",
             style: {
                 marginTop: compensateScroll ? -((_scrolls_current_panelId = scrolls.current[panelId]) !== null && _scrolls_current_panelId !== void 0 ? _scrolls_current_panelId : 0) : undefined
@@ -422,7 +425,7 @@ var warn = warnOnce("View");
         }, /*#__PURE__*/ React.createElement(NavTransitionProvider, {
             entering: panelId === nextPanel || panelId === swipeBackNextPanel
         }, panel))));
-    })));
+    }))));
 };
 
 //# sourceMappingURL=View.js.map